CSS Grid - All You Need to Know If You Still Refuse to Use It

[mostakimvip06]

The draft version of grid was created in 2007, and the first version was published in 2011, but its operation was slow and left much to be desired. It was not until 2016 that the version received the title of "Candidate recommendation" given by the W3C organization dealing with setting standards for writing and sending WWW pages.

This does not mean that grid has become a standard, but it is strongly recommended . This is also evidenced by its support by all new browsers. It has not been supported only by the outdated Internet Explorer . Therefore, grid can be called a relatively new and revolutionary feature when it comes to creating a page layout. So, without prolonging the introduction, let's move on to the main part.

Flexbox vs Grid - what's the difference?
The basic and fundamental difference between these two properties is that Flexbox is a one-dimensional property. This means that we can use it to arrange elements horizontally OR vertically, whereas Grid is two-dimensional and gives us the ability to work horizontally AND vertically.

The grid allows us to create more asymmetrical web layouts because it gives us more control over the elements.

Additionally, we have the ability to position elements in such a way that they overlap without disturbing the rest of the elements, as was done by the float property, after using which it was common practice to write so-called "Clearfixes".

Should I use CSS Grid Layout or CSS Flex Box Layout?
In my subjective opinion, when creating a layout you should not limit yourself to one property, there are situations where flexbox will work better, such as arranging simple menu items on one line:

Flexbox

There are also situations where the grid is a must-use , such as an asymmetric blog layout or an interesting photo gallery:

Grid

For more complicated layouts, grid can be combined with flexbox, e.g. using grid to structure cards and flexbox to arrange elements inside cards. Don't be afraid to experiment, both properties work very well together:

Grid and Flexbox in one layout

Basics of Using Grid (CSS Grid)
Grid creates a two-dimensional grid. Elements are placed on it. There are many possibilities for positioning elements inside the grid. For the purposes of this post, I decided to describe the shortened properties, because I think they are the most convenient to use

display: grid | inline-grid; - initializes the grid, similar to flexbox. We use it on the ivory coast telemarketing data container, i.e. the element whose children we want to position.
grid-template-columns: <column template>; - defines the column grid. Possible values ​​are:
hard values ​​like px,
relative values ​​like rem, em, %, vw, vh, ch, fr,
values ​​can be combined by separating them with a space.
Example usage: grid-template-columns: 100px 100px 100px; - creates three columns of one hundred pixels each, in which we can freely arrange children elements.
grid-template-rows: <row template>; - defines the rows. Possible values ​​are:
hard values ​​like px,
relative values ​​like rem, em, %, vw, vh, ch, fr,
values ​​can be combined by separating them with a space.
Example usage: grid-template-rows: 10 rem 100px 50vh 100px; - creates four rows with values ​​given in order, in which we can freely arrange children elements.
Positioning elements in the grid
The two diagrams presented above show how we can calculate the space for placing elements in the grid:

CSS Grid
If we provide a range, we count the lines as in the attached diagram, e.g. place an element from line 1 to 4.

CSS Grid
If we want to place an element in one cell, we can use a single numeric value.

We do this using properties:

grid-column: <space size>; - the amount of space in columns (horizontally) that the element should occupy. Possible values ​​are:
single value like 1, 2, 3 corresponding to columns,
the value of the beginning and end of the column counted by "lines", e.g. 1(beginning) / 3(end),
you can use the span value to specify the column range the element should occupy, e.g. 1(start) / span 3.
Whereas, lining up is done using:
grid-row: <space size>; - the amount of space in rows (vertical) that the given element should take up. Possible values ​​are:
single value like 1, 2, 3 corresponding to rows,
the value of the beginning and end of the row counted by "lines", e.g. 1(beginning) / 3(end),
you can also use a span (interval) as in the case of columns.
grid-area: <area size>; - the area size here takes values ​​in the order: start of row / start of column / end of row / end of column.
It is possible to add space between "cells" without using margins, we create it using the property:

gap:<numeric value>; - also accepts all possible numeric values ​​available in css gap: distance between rows / distance between columns, if one value is given it is responsible for rows and columns.
Location of container contents:

align-items: <start / center / end / stretch>; - aligns items in the "cell" vertically, the basic value is stretch, thanks to which the grid "stretches" the item to the entire height of the cell.
justify-items: <start / center / end / stretch>; - sets items in the "cell" horizontally, here too the basic value is stretch, which "stretches" the item to the entire width of the cell.
place-items: <start / center / end / stretch>; - combines both of the above values, values ​​are given in pairs, it is possible to give one value, e.g. center, to center vertically and horizontally without stretching the element.
It is also possible for the element itself to decide about its position relative to the "cell", in which case we modify the above properties by replacing items with self and use them on the element that is a direct child of the container.

Template areas
A useful feature is the ability to name grid fields, so we can refer to them by name. Using template areas, creating a "holy grail" layout is child's play.

We create a grid:

.grid-wrapper {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px 250px 50px;
}
Thanks to this we have created a 3 x 3 grid.

Now we can name the fields whatever we want:

.grid-wrapper {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px 250px 50px;
grid-template-areas: "head head head"
"right-side main left-side"
"logo footer footer";
}
Grid

Now we can assign appropriate names to individual elements at our discretion using grid-area

.grid-child {
grid-area: "head";
}
On e.g. the navbar it will result in the navbar placing and occupying the entire position named head (three top columns)

Grid CSS Automation and Features
But what's really great about the grid is the automation capabilities and features built into it.

So let's assume that we download blog entries from the Internet and we don't know their number and we don't want to rigidly set the entire grid for them, we can set one plane and in the other use the property:

grid-auto-rows or grid-auto-cols - which will decide for us how many fields to add automatically. In the value we give them a numerical value, e.g. grid-auto-rows: 600px ; will create x rows of 600px each,
grid-auto-flow accepts values ​​row , column , dense or a combination of row dense , column dense - sets the direction in which the grid elements are to be arranged,
repeat - works well when creating more columns or rows, used inside grid-template-columns/ grid-template-rows values . Example usage:
grid-template-columns: repeat( 10 ( ilość powtórzeń ), 100px( wielkość kolumny ) );
Another example:

grid-template-rows: 100px repeat(3, 20rem) 10em 30%;
Creates 6 rows with specific sizes.

Repeat can additionally take the values ​​auto-fill and auto-fit .

auto-fill : will create as many columns as possible even if they are empty,
auto-fit : will create as many columns as there is room for, and if there are any left it will stretch the created columns to take up the entire space.
They are used e.g. grid-template-columns: repeat(auto-fit, 300px);

minmax : selects between two given units, one of which should be smaller, e.g. grid-template-columns: repeat(3, minmax (50px, 1fr)) is used .
Special units in Grid
Special units will improve automation capabilities and increase responsiveness without using media queries:

fr or fractional units giving "part of the remaining space". Example usage: grid-template-columns: repeat(3, 1fr); divides the screen into three equal parts horizontally,
min-content is the minimum possible width of the content, it can be best visualized in text. For example, min-content for "Lorem ipsum dolor sit amet, consectetuer adipiscing elit" is the width of "consectetuer", i.e. the width of the longest word ,
max-content is the maximum possible width of the element, i.e. in the case of the sentence as above, it is the length of the sentence,
fit-content - a value in between, takes up all available space, but is not shorter than min-content or longer than max-content.