CSS Grid (Grid Layout)

The CSS Grid Layout Module is a robust two-dimensional system designed to lay out elements in columns and rows simultaneously. It is the ultimate tool for handling complex, large-scale layouts, such as entire web page structures (headers, sidebars, footers).

Unlike Flexbox (which focuses on content distribution along one axis), Grid focuses on layout structure across two axes.

1. Core Concepts: Container, Tracks, and Cells

Grid works by defining a canvas (the container) and then placing items onto that canvas.

1. Grid Container (Parent): The element where you declare display: grid;. This defines the Grid Formatting Context for its direct children.
2. Grid Tracks: The names for the rows and columns you define on the container.
   • Columns: Vertical tracks.
   • Rows: Horizontal tracks.
3. Grid Cells: The intersection of a row and a column. This is the basic unit where a Grid Item sits.
4. Grid Lines: The dividing lines between the columns and rows. Items are placed by referencing these lines.

2. Grid Container Properties (Defining the Canvas)

These properties are applied to the parent element with display: grid;.

2.1. grid-template-columns and grid-template-rows

These are the most critical properties, defining the number, size, and names of your tracks (columns and rows).

Example	Description
100px 1fr 2fr	Creates three columns: the first is fixed at $100\text{px}$, the second gets one share of the remaining space, and the third gets two shares.
auto 200px auto	Creates three columns: two columns sized to fit their content (auto), and one fixed at $200\text{px}$.

The fr Unit (Fractional Unit)

The fr unit is specific to Grid and represents a fraction of the available space in the grid container. It is incredibly useful for responsive design:

styles.css

.container {
  /* Creates three columns that divide the available space equally */
  grid-template-columns: 1fr 1fr 1fr; 
}

The repeat() function

A shorthand to define many identical tracks.

styles.css

.container {
  /* Creates twelve columns, each 1fr wide */
  grid-template-columns: repeat(12, 1fr); 
}

2.2. grid-gap (or gap)

Defines the spacing between the rows and columns. This is much easier than manually setting margins on children.

styles.css

.container {
  /* Shorthand for both row and column gap */
  gap: 20px; 
  /* OR specific settings */
  row-gap: 10px;
  column-gap: 30px;
}

2.3. justify-content and align-content (Grid Alignment)

These properties control the alignment of the entire grid within the container if the container is larger than the content.

• justify-content: Aligns the grid along the Row axis.
• align-content: Aligns the grid along the Column axis.

2.4. justify-items and align-items (Item Alignment)

These properties control the alignment of the content inside each cell across the entire grid.

• justify-items: Aligns items horizontally in their cell (Row axis).
• align-items: Aligns items vertically in their cell (Column axis).

3. Grid Item Properties (Placing Content)

These properties are applied to the children and define where they start and end on the canvas.

3.1. grid-column and grid-row

These shorthands define where an item begins and ends, using the grid lines as reference points.

• grid-column-start / grid-column-end
• grid-row-start / grid-row-end

styles.css

.header {
  /* Starts at line 1 and spans until line 4 */
  grid-column-start: 1;
  grid-column-end: 4; 
  /* Shorthand: */
  grid-column: 1 / 4; 
}

.sidebar {
  /* Starts at line 4 and spans only 1 column */
  grid-column: 4 / span 1; 
}

3.2. grid-area (Named Areas)

The most readable and powerful way to structure a page. You assign names to parts of the grid layout.

Step 1: Define the structure on the Parent

styles.css

.page-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  /* Define the layout using names: */
  grid-template-areas: 
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

Step 2: Assign the Item to the Named Area

styles.css

.main-header { grid-area: header; }
.main-content { grid-area: main; }
.main-nav { grid-area: nav; }

Best Practice

Using grid-area makes the structure of your HTML visually obvious in the CSS. If you need to rearrange the layout for mobile (e.g., move the sidebar below the content), you simply redefine the grid-template-areas within a media query.

Interactive CSS Grid Demo

This demo uses Grid to create a classic blog layout (Header, Sidebar, Main Content, Footer).