What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system for web pages. It allows positioning elements in rows and columns, providing a powerful tool for building complex, responsive layouts.

Key concepts:

Container (Grid Container): An element assigned display: grid or display: inline-grid. All its direct children become grid items.
Grid Items: Direct children of the grid container.
Grid Lines: Horizontal and vertical lines defining the grid structure. They are numbered starting from 1.
Grid Tracks: Space between two adjacent grid lines (rows or columns).
Grid Cells: Space between two adjacent row lines and two adjacent column lines. This is the smallest indivisible unit of the grid.
Grid Areas: Rectangular regions consisting of one or more grid cells.

Key properties:

For the container:

display: grid or inline-grid.
grid-template-columns: Defines the number and size of columns (e.g., 1fr 1fr auto).
grid-template-rows: Defines the number and size of rows.
gap, row-gap, column-gap: Sets the spacing between tracks.
justify-items, align-items, place-items: Aligns content inside grid cells.
justify-content, align-content, place-content: Aligns the entire grid within the container.
grid-template-areas: Defines named grid areas.
grid-auto-columns, grid-auto-rows: Defines the size of implicitly created tracks.
grid-auto-flow: Determines how elements are automatically placed.

For grid items:

grid-column-start, grid-column-end, grid-column: Defines which columns the element spans.
grid-row-start, grid-row-end, grid-row: Defines which rows the element spans.
grid-area: Combines grid-row-start, grid-column-start, grid-row-end, grid-column-end properties or references a named area.
justify-self, align-self, place-self: Aligns a specific element within its cell.

The fr unit (fraction): Represents a share of the remaining space in the grid container after all fixed sizes are accounted for.

Example of a simple layout:

.container {
  display: grid; /* Make the container a grid */
  grid-template-columns: 1fr 2fr; /* Two columns: first takes 1 share, second takes 2 shares of remaining space */
  grid-template-rows: auto 100px; /* Two rows: first adjusts to content, second has fixed height of 100px */
  gap: 10px; /* 10px gap between all cells */
}

.item {
  background-color: lightblue;
  padding: 20px;
  border: 1px solid blue;
}

.item1 {
  grid-column: 1 / 3; /* First item spans both columns */
}

Advantages:

Powerful tool for creating complex layouts.
Simplifies development of responsive designs.
Separates structure from content.
Allows easy management of element order and placement regardless of their position in HTML.
Supports both fixed and flexible track sizes.

CSS Grid is ideal for creating overall page layouts, while Flexbox is often better suited for aligning and distributing space among items in a single dimension (row or column).