CSS Grid - CSS - Simple Dev

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

CSS Grid – CSS