CSS Grid is the a new CSS module that is designed to help solve layout problems that website developers have been facing for a long time. CSS Grid is now supported in the current version of all major browsers, which means right now is a great time to learn and use CSS Grid in your projects.
You may have already learned how to build layouts using Flexbox, which is great. The basic difference between CSS Grid Layout and CSS Flexbox Layout is that Flexbox was designed for a layout in one dimension -- meaning either a row or a column. Grid was designed for two-dimensional layouts -- rows and columns.
To create a grid, use the display property to establish a new grid.
Values:
- grid - generates a block-level grid
- inline-grid - generates an inline-level grid
.container {
display
:
grid
;
}
The grid-template-columns CSS property defines sizing and name functions of the grid columns.
.container {
display
:
grid
;
grid-template-columns
:
100px 100px 100px
;
background-color
:
white;
;
}
The grid-template-rows CSS property defines sizing and name functions of the grid rows.
.container {
display
:
grid
;
grid-template-rows
:
100px 100px 100px
;
}
Gutters or alleys are the spaces between grid rows and columns.
Ways to define gutters:
- grid-column-gap - size of the gap (gutter) between an element's columns
- grid-row-gap - size of the gap (gutter) between an element's rows
- grid-gap - shorthand for grid-column-gap and grid-row-gap
.container {
display
:
grid
;
grid-template-rows
:
60px 60px 60px
;
grid-row-gap
:
10px
;
}
Here an example layout patterns using CSS Grid.
Holy Grail Layout -- a header, footer, 2 side-bars and a main content container.
.container {
display
:
grid
;
grid-template-columns:
:
80px auto 80px;
;
grid-template-rows
:
repeat(3, 100px);
;
grid-row-gap
:
10px
;
}
header, footer {
grid-column:
:
1/4
;
}