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.
Child elements of the element defined by the grid container become grid elements.
display:grid: generates a block-level grid
display:inline-grid: generates an inline-level grid
They are spaces between rows and /or columns, not for outer edges.
grid-gap: With grid-gap, you can value the gaps of all rows and columns (px, em,%, etc.)
grid-gap: 1em; }
grid-gap: 1em 1em; }
Or you can specify these values separately using grid-column-gap and grid-row-gap.
grid-column-gap: 1em; }
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:
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 repeat (number, size).
📌 I want to tell you about it when I used “fr” here.
With fr, 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, grid-row-start / end, grid-column-start / end will help us.
Let’s set the position by entering the row, column start and end values.
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, grid-row and grid-column.
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: grid-area.
The syntax for the grid-area is, grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area: 2 / 2 / 3 / 3; }
We can also use these expressions very easily to spread the divs.
grid-row: 2 / 4;
grid-column: 1 / 3;
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 span expression before. So what is this span and what is it for?
📌 Coverage will be made as much as the number of grids written with span.
Naming and Positioning Items by Grid Areas
For naming and positioning by grid areas, we need to pay attention to two properties. These are, grid-area and grid-template-areas.
grid-area, gives an item a name so that it can be referenced by a template created with the grid-template-areas property.
grid-template-areas, specifies named grid areas, establishing the cells in the grid and assigning them names.
"header header header header"
"main main . sidebar" // "." is empty area
"footer footer footer footer"; }
📌 auto-fill and auto-fit
auto-fill: It fills the row with as many columns as it can fit, so there are gaps.
📌auto-fit: Arranges columns as they take up all available space.
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 grid-auto-rows, grid-auto-columns, and grid-auto-flow properties.
grid-template-columns: repeat(2, 1fr);
A second row track was auto-created to make room for items 3 and 4.
grid-auto-flow: Controls how auto-placed items are placed on the grid.
Aligning Grid Items
justify-items and align-items properties are used to align divs inside the container.
justify-items: Allows grid items to align on the vertical axis.
justify-items: start | end | center | stretch; }
align-items: Allows grid items to align on the horizontal axis.
align-items: start | end | center | stretch; }
Aligning Grid Tracks
If we want to align the grid tracks, this time we need to use justify-content and align-content.
justify-content: Grid aligns the tracks on the horizontal axis.
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: Grid aligns the tracks on the vertical axis.
align-content: start | end | center | stretch | space-around | space-between | space-evenly; }
Yeah, that’s it!
I hope this article was useful to you. See you in my next article 👋