Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

CSS Grid – CSS

Demo

Summary

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.

Details

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

Exercises

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

References

Grids on MDN

Back to: CSS Course > Intermediate CSS