CSS Grid Layout is a two-dimensional layout system 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

• Grid Container: The element on which display: grid is applied.
• Grid Item: The direct children of the grid container.
• Grid Line: The dividing lines that make up the structure of the grid.

Example

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

This creates a grid with three equal-width columns.