CSS Grid

Syntax

display: grid;

Examples

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

.grid-item {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

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

/* Grid will automatically adjust number of columns based on available space */
.responsive-grid .item {
  background: #4CAF50;
  color: white;
  padding: 40px;
  border-radius: 10px;
}

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 60px;
  gap: 15px;
  height: 100vh;
}

.header { grid-area: header; background: #333; }
.sidebar { grid-area: sidebar; background: #555; }
.main { grid-area: main; background: #777; }
.footer { grid-area: footer; background: #333; }

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 10px;
}

/* Span multiple columns/rows */
.featured {
  grid-column: 1 / 3;  /* Span 2 columns */
  grid-row: 1 / 3;     /* Span 2 rows */
  background: #ff6b6b;
}

.wide {
  grid-column: span 2;  /* Span 2 columns */
  background: #4ecdc4;
}

.tall {
  grid-row: span 2;     /* Span 2 rows */
  background: #45b7d1;
}

Parameters and values

• display (grid | inline-grid): Defines a grid container
• grid-template-columns (track-size): Defines column tracks
• grid-template-rows (track-size): Defines row tracks
• grid-template-areas (string): Defines named grid areas
• gap (length): Sets spacing between grid items
• grid-column (start / end): Item column placement
• grid-row (start / end): Item row placement

Best practices

• Use Grid for two-dimensional layouts requiring both row and column control
• Prefer fr units over percentages for flexible, responsive columns
• Use repeat() and auto-fit/auto-fill for responsive grids without media queries
• Name grid areas with grid-template-areas for readable, maintainable layouts
• Combine minmax() with auto-fit for truly responsive designs
• Use gap instead of margins for consistent spacing between grid items

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

Specifications & further reading

• CSS specifications (modules)

Related CSS documentation