Modern layouts with CSS Grid

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.

Make a grid

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 ;
}
Grid Columns

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; ;
}
Column 1
Column 2
Column 3
Grid Rows

The grid-template-rows CSS property defines sizing and name functions of the grid rows.

.container {
display : grid ;
grid-template-rows : 100px 100px 100px ;
}
Column 1
Column 2
Column 3
Gutters

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 ;
}
Column 1
Column 2
Column 3
Layouts

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 ;
}
Header
Article