CSS GRID LAYOUT

Sena Akbulut
Feb 23 · 6 min read

Hello, today I want to tell you about the CSS Grid Layout. So, what is this CSS Grid Layout? What does it do? So let’s start!

CSS Grid is a great module that simplifies web design by providing Grid structure with rows and columns. Thanks to the CSS Grid, you can easily apply your designs to websites without the need for various positioning. So no need to tire yourself like this guy to the position with CSS :)

Now I want to tell you about the components of CSS Grid.

Grid Container

Child elements of the element defined by the become grid elements.

generates a block-level grid

generates an inline-level grid

.container{
display:grid; }
.container{
display:inline-grid; }

Grid Gap

They are spaces between rows and /or columns, not for outer edges.

With , you can value the gaps of all rows and columns (px, em,%, etc.)

.container{
grid-gap: 1em; }

.container{
grid-gap: 1em 1em; }

Or you can specify these values separately using and .

.container{
grid-row-gap: 1em;
grid-column-gap: 1em; }

Grid Tracks

The grid is used to define rows and columns. We can also think of Grid tracks as the parts between two lines. We can use these rows and columns as follows:

.container{
grid-template-rows: 50px 100px 50px;
grid-template-columns: 50px 100px; }

In this way, you can create divs with different numbers and different pixel sizes.

📌 Likewise, if you want to make divs with the same pixels, you can use .

.container{
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(2,1fr);
}

📌 I want to tell you about it when I used here.

With , we can create flexible grid tracks. We can obtain structures that cover the size of the screen and that can flexibly shrink and grow.

Positioning Items by Grid Line Numbers

Grid lines are essentially lines that represent the start of, the end of, or between the column and row tracks. Each line, starting from the start of the track and in the direction of the grid, is numbered incrementally starting from 1.

For example, we want to replace the 1st div with the 4th div. If we say what we can do for this, , will help us.

Let’s set the position by entering the row, column start and end values.

.itemone{
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3; }

📌 So what should we do if we don’t want to write that long? Of course, there is a shortcut for this, and

.itemone{
grid-row: 2;
grid-column: 2 / 3; } //starting and ending line numbers

📌 What if this still seems long to you? I can hear you asking if this has a shortcut too. Yes, these also have a shortcut:

The syntax for the grid-area is,

.itemone{
grid-area: 2 / 2 / 3 / 3; }

We can also use these expressions very easily to spread the divs.

.itemone{
grid-row: 2 / 4;
grid-column: 1 / 3;
}
.itemone{
grid-row: span 2;
grid-column: span 2;
}

In this way, we get the look we want.
Hmm, did you notice anything different? Yes, we’ve never seen the expression before. So what is this and what is it for?

📌 Coverage will be made as much as the number of grids written with .

Naming and Positioning Items by Grid Areas

For naming and positioning by grid areas, we need to pay attention to two properties. These are, and

, gives an item a name so that it can be referenced by a template created with the grid-template-areas property.

.itemone{
grid-area:header;
}
.itemtwo{
grid-area:main;
}

, specifies named grid areas, establishing the cells in the grid and assigning them names.

.container{
grid-template-areas:
"header header header header"
"main main . sidebar" //
"footer footer footer footer"; }

📌 auto-fill and auto-fit

It fills the row with as many columns as it can fit, so there are gaps.

📌Arranges columns as they take up all available space.

Implicit Grid

Implicit grid get created when there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid.

The implicit grid can be defined using the , , and properties.

.container{
grid-template-rows: 50px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
}

A second row track was auto-created to make room for items 3 and 4.

Controls how auto-placed items are placed on the grid.

.container{
grid-auto-flow: row;
}
.container{
grid-auto-flow: column;
}

Aligning Grid Items

and properties are used to align divs inside the container.

Allows grid items to align on the vertical axis.

.container { 
justify-items: start | end | center | stretch; }
justify-items: center;

Allows grid items to align on the horizontal axis.

.container { 
align-items: start | end | center | stretch; }
align-items: end;

Aligning Grid Tracks

If we want to align the grid tracks, this time we need to use and .

Grid aligns the tracks on the horizontal axis.

.container {   
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
justify-content:center;

Grid aligns the tracks on the vertical axis.

.container {   
align-content: start | end | center | stretch | space-around | space-between | space-evenly; }
align-content:center;

Yeah, that’s it!

I hope this article was useful to you. See you in my next article 👋

Star Gazers

“If you want to master something, teach it.”

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store