Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

CSS Grid – CSS



To enable CSS grid on a parent element, add the display property with a value of grid to it:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

You should also add the grid-template-columns property with a value for each column you want.


The CSS grid allows you to create more complex layouts.

The fr unit is a fractional unit. In the example above, the grid will be split into 3 even columns, since all of the columns have the same value (1fr).

You can also use pixels and other length units to define your column widths.

Additional Properties

You can use the grid-gap property to add space between columns and rows:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;

CSS grid demo


Recreate the CSS code from the Demo section in your CSS file.


Grids on MDN

Back to: CSS Reference > Intermediate CSS