Practical CSS Grid Layouts

Practical CSS Grid Layouts

CSS Grid becomes especially useful when its track sizing, placement, alignment, and responsive features are combined to build complete page layouts and reusable components.

Grid can create page structures, card collections, galleries, sidebars, and other layouts that need control over both rows and columns. The examples on this page combine techniques covered throughout the CSS Grid tutorials.

Choosing Grid for a Layout

CSS Grid is well suited to layouts that need coordinated control over rows and columns. It is especially useful when several elements need to align to the same track structure.

Common uses for Grid include:

• Page layouts with headers, sidebars, main content, and footers.
• Card and product collections arranged in rows and columns.
• Image and portfolio galleries.
• Dashboard and application interfaces.
• Components containing items that span multiple rows or columns.
• Responsive layouts that automatically adjust their number of columns.

Flexbox is often convenient for arranging content primarily along one axis, while Grid is designed for two-dimensional layouts involving both rows and columns. The two layout systems can also be used together.

Page Layout

Named grid areas can make the structure of a page easy to understand directly from its CSS.

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 15px;
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

The sidebar receives a fixed column while the main content uses the remaining flexible space. The header and footer span both columns.

Named areas are particularly helpful when the major regions of a layout have clear structural roles.

Sidebar and Content Layout

A sidebar layout does not require named areas when a simple two-column structure is sufficient.

.content-layout {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: 20px;
}

The sidebar can grow between 180 and 250 pixels, while the main content receives the remaining flexible space.

Using minmax(0, 1fr) for the flexible content track allows it to shrink below its automatic content-based minimum when necessary.

Responsive Card Layout

A responsive card collection is one of the most useful Grid patterns.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

The browser creates as many columns as fit while keeping each track at least 220 pixels wide. When fewer columns fit, the remaining cards continue onto additional rows.

This pattern can adapt to the available width without requiring a media query for each change in column count.

Gallery Layout

Grid can create a consistent gallery with flexible columns and equal spacing between items.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
}

Each image fills the width of its grid area while maintaining its intrinsic aspect ratio.

If a uniform gallery appearance is required, an image container can use aspect-ratio with object-fit: cover to create consistently sized image areas.

Spanning Grid Items

Individual items can span multiple tracks to create featured content or visual emphasis.

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

The featured item spans two column tracks while the remaining items continue through the Grid according to the placement rules.

Items can also span rows.

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

Spanning should be used with care in responsive layouts because fewer tracks may be available at narrower widths.

Responsive Grid Layouts

Grid layouts can respond to available space through flexible tracks, automatic repetition, or media queries.

For layouts with named areas, a media query can completely rearrange the visual structure while keeping the same HTML.

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
@media (max-width: 700px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

The desktop layout uses two columns, while the narrower layout places each region in a single column.

Visual rearrangement does not change the document source order, so the HTML should remain organized in a logical reading and keyboard navigation order.

Grid and Flexbox Together

Grid and Flexbox are complementary layout systems and can be used together on the same page.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.card {
  display: flex;
  flex-direction: column;
}
.card a {
  margin-top: auto;
}

Grid controls the arrangement of the cards, while Flexbox controls the content inside each card. The link can be pushed toward the bottom of the card with margin-top: auto.

Using each layout system for the job it handles well can keep CSS simpler than forcing one system to control every part of a design.

Practical Grid Guidelines

A few general practices can make Grid layouts easier to build and maintain.

Practical CSS Grid Example

The following example combines named areas, flexible tracks, gap, and a media query to create a responsive page layout.

.page {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}
@media (max-width: 600px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Open the example in the editor and change the column sizes, area arrangement, or breakpoint. Drag the divider between the code and result panes to change the preview width and see the layout switch between two-column and single-column arrangements.