Mastering CSS Grid Layout

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.

Published on 2023-11-10

CSS Grid Layout

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay out items in rows and columns.

Source Code

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

This creates a grid with 3 equal columns.