CSS Grid

1 novembre 2020 Axel Teillier Commentaires 0 Commentaire

What’s CSS Grid?

The CSS Grid Layout is a two-dimensional grid-based layout system based on both columns and rows. Thanks to this feature, Grid is the most powerful layout system currently available in CSS, even more than the CSS Flexbox layout which a one-dimensional system.

How to use it?

Grid / Inline

To get started, you have to create an html file where you define all your containers. I’ll let you do it without any clues because I know you can do it by your own ;). Then, you have to define a container element as a grid with display: grid.

Grid items are placed in rows by default and span the full width of the grid container.

You can also use the command display: inline-grid to change the direction of the display.

Columns / Rows

Then, you have to set the columns and row sizes thanks to the commands grid-template-columns and grid-template-rows. You can use a bunch of unities, with positive or negative values, such as px, %, em, fr, auto, etc.

For example, by using the commands :

display: grid;
grid-template-rows: repeat(4, 50px);

You’ll obtain this result :

You can try other unities by typing those commands, one by one, with differents unities. Try it out!

grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(4, 10%);
grid-template-columns: repeat(4, 20rem);
grid-template-columns: repeat(4, 20rem);
grid-template-columns: 3rem 25% 1fr 30px;

Gaps

You can also separate the box (or cell) with, for example, a gap that you’ll define with the same logic.

grid-column-gap: 5rem;
grid-row-gap:    20px;

You can also use grid-gap which can replace the commands grid-column-gap and grid-row-gap.

grid-gap: 5rem, 20px;

Areas

One of the pretty cool features of Grid is the possibility to create an area in the form of a matrix and to define the size of the columns and the rows with it. In order to do that, you have to use the command grid-template-areas.

Example :

grid-template-areas: 
            "a a a"
            "b c c"
            "b c c";

grid-template-areas: 
            "a a ."
            "a a ."
            ". b c";

Justify content and items

By using the command justify-content, you can set the alignment of the grid within the grid container along the row (or inline) axis. This is the opposite to the command align-content. This command will apply the value to all the items within the container and they are a various types of values that you can apply.

Here are some examples:

By using the command justify-items, you can aligns the grid items along the row (or inline) axis. This is the opposite to the command align-items. As before, this command will apply the value to all the items within the container.

Some examples:

Align content and items

By using the command align-content, you can set the alignment of the grid within the grid container along the column axis. This is the opposite to the command justify-content. This command will apply the value to all the items within the container and they are a various types of values that you can apply.

Here are some examples:

By using the command align-items, you can aligns the grid items along the column axis. This is the opposite to the command justify-items. As before, this command will apply the value to all the items within the container.