CSS Grid Introduction

CSS Grid

CSS Grid Layout is a two-dimensional layout system designed to arrange elements in rows and columns while providing precise control over sizing, spacing, placement, and alignment.

A grid layout begins with a grid container. Its in-flow child elements become grid items that can be arranged within columns and rows defined by the grid.

What is CSS Grid?

CSS Grid is designed for layouts where elements need to be organized across both rows and columns. This makes it especially useful for page layouts, galleries, cards, dashboards, and other arrangements that depend on a two-dimensional structure.

Unlike older layout techniques, Grid provides CSS properties specifically designed for defining tracks, controlling gaps, positioning items, and aligning content within a grid.

Grid Containers and Grid Items

A Grid layout consists primarily of a grid container and its grid items.

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Once the parent becomes a grid container, its in-flow children participate as grid items.

Creating a Grid

A block-level grid container is created with display: grid.

.grid-container {
  display: grid;
}

The inline-grid value creates an inline-level grid container.

.grid-container {
  display: inline-grid;
}

Creating the grid container establishes Grid formatting, but columns and rows can then be defined to create the desired layout structure.

Grid Columns and Rows

Grid columns and rows define the basic structure of a Grid layout.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

This creates three equal columns. The fr unit represents a fraction of the available space in the grid container.

Rows can also be explicitly defined.

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

This grid has three explicitly defined columns and two explicitly defined rows.

Grid Tracks

A grid track is the space between two adjacent grid lines. A track can be a column track or a row track.

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

This example creates three column tracks. The first is 200 pixels wide, while the remaining two divide the available flexible space.

Tracks can use fixed lengths, percentages, flexible units, intrinsic sizing values, and sizing functions such as minmax().

Grid Lines

Grid lines form the boundaries between grid tracks and provide reference points for positioning grid items.

A grid containing three columns has four column lines: one before the first column, two between the columns, and one after the final column.

.item {
  grid-column-start: 1;
  grid-column-end: 3;
}

This item starts at column line 1 and ends at column line 3, causing it to span two column tracks.

Grid Cells

A grid cell is the smallest individual area in a grid, formed by the intersection of one row track and one column track.

An automatically placed grid item normally occupies a single grid cell unless its placement or spanning behavior specifies otherwise.

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

Each row in this example contains three grid cells because the grid has three column tracks.

Grid Areas

A grid area is a rectangular region consisting of one or more grid cells.

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

This item spans multiple columns and rows, creating a larger rectangular grid area.

Grid areas can also be given names with grid-template-areas, which can make page layouts easier to visualize and maintain.

Grid Gaps

The gap property adds spacing between grid rows and columns.

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

The gap separates neighboring tracks without requiring margins on individual grid items.

The row-gap and column-gap properties can be used when different spacing is needed between rows and columns.

Placing Grid Items

Grid items are automatically placed when no explicit placement is provided, but Grid also allows items to be positioned using grid lines.

.featured {
  grid-column: 1 / 3;
}

The featured item spans from column line 1 to column line 3 and therefore occupies two column tracks.

.featured {
  grid-column: 1 / span 2;
}

The span keyword provides another way to specify how many tracks an item should cover.

Grid Alignment

Grid includes alignment properties for controlling grid items and the grid itself.

.grid-container {
  display: grid;
  justify-items: center;
  align-items: center;
}

The justify-items property controls inline-axis alignment within grid areas, while align-items controls block-axis alignment.

Properties such as justify-content and align-content can control the alignment of the grid tracks within the grid container when additional space is available.

Explicit and Implicit Grids

The explicit grid consists of tracks defined with properties such as grid-template-columns and grid-template-rows.

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

If additional grid items require tracks that were not explicitly defined, Grid can create implicit tracks automatically.

Properties such as grid-auto-rows and grid-auto-columns can control the sizing of those implicit tracks.

Grid and Flexbox

CSS Grid and Flexbox are complementary layout systems. Neither replaces the other.

A grid item can contain a Flexbox layout, and a flex item can contain a Grid layout. It is common for both systems to be used within the same website.

When to Use Grid

CSS Grid is particularly useful when a layout needs coordinated control over rows and columns.

Common uses include:

• Page layouts with headers, sidebars, main content, and footers.
• Card and gallery layouts arranged in rows and columns.
• Dashboard interfaces with structured regions.
• Layouts where items need to span multiple rows or columns.
• Responsive layouts that need flexible track sizing.

Use Flexbox when the primary problem is arranging items along one axis. Use Grid when rows and columns need to be coordinated as part of the layout.

CSS Grid Example

The following example creates a three-column grid with consistent gaps. The first item spans two columns, demonstrating how Grid can control both the overall track structure and the placement of individual items.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.item-1 {
  grid-column: span 2;
}