How to layout with CSS Grid

Define columns

Grid arranges direct children in rows and columns. Fraction units share available space.

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

Create responsive cards

auto-fit and minmax() can create as many useful columns as fit without a media query.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

Place an item

Line-based placement lets an item span tracks. Keep source order logical because visual placement does not change reading or tab order.

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

Choose Grid or Flexbox

• Use Grid when rows and columns both matter
• Use Flexbox when arranging primarily along one axis
• Nest the two layout systems when appropriate
• Prefer gap over child margins for layout spacing