CSS Grid Layout: Building Responsive Designs

Sun, 14 Jun 2020 00:00:00 +0000

CSS Grid is a two-dimensional layout system-rows and columns together-making it ideal for page layouts, dashboards, and card grids that Flexbox alone struggles with.

Defining a Grid

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.sidebar { grid-column: 1; grid-row: 2; }
.main    { grid-column: 2; grid-row: 2; }

Responsive Patterns

Use repeat(auto-fit, minmax(280px, 1fr)) for card layouts that reflow without media queries. Named grid areas improve readability:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}

Grid vs Flexbox

Use Grid for page-level structure; use Flexbox for aligning items inside a component (nav links, button groups). They complement each other.

Grid on David Lang

CSS Grid Layout: Building Responsive Designs

Defining a Grid

Responsive Patterns

Grid vs Flexbox