CSS Grid Layout is a two-dimensional layout system designed for the web. It lets you lay out items in rows and columns, and has many features that make building complex layouts straightforward.

Basic Concepts

CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements.

Creating a Grid Container

To create a grid container, you set the display property on an element to grid or inline-grid:

.container {
  display: grid;
}

Defining Grid Columns and Rows

You can define the columns and rows of your grid with the grid-template-columns and grid-template-rows properties:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px auto 100px;
}

Placing Items on the Grid

You can place items on the grid using the grid-column and grid-row properties:

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Conclusion

CSS Grid Layout is a powerful tool for creating complex layouts. With a solid understanding of the basics, you can create sophisticated layouts with clean, readable CSS.