~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/css/5css-grid

# CSS Grid

CSS Grid is a two-dimensional layout system for rows and columns simultaneously.

## Grid Container

Enable grid on a parent element:

```css
.container {
  display: grid;
}
```

## Defining Columns and Rows

```css
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3 fixed columns */
  grid-template-rows: 100px auto;              /* 2 rows */
}
```

## The fr Unit

Fractional unit for flexible sizing:

```css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 1:2:1 ratio */
  grid-template-rows: auto 1fr auto;   /* Header, content, footer */
}
```

## Repeat Function

Repeat patterns:

```css
.container {
  grid-template-columns: repeat(3, 1fr);           /* 3 equal columns */
  grid-template-columns: repeat(4, 200px);         /* 4 fixed columns */
  grid-template-columns: repeat(auto-fill, 200px); /* Auto-fill */
  grid-template-columns: repeat(auto-fit, 200px);  /* Auto-fit */
}
```

## Gap

Space between grid items:

```css
.container {
  display: grid;
  gap: 20px;           /* Both row and column gap */
  row-gap: 20px;       /* Row gap only */
  column-gap: 20px;    /* Column gap only */
}
```

## Grid Items

Properties for individual items:

```css
.item {
  grid-column: 1 / 3;      /* Span from column line 1 to 3 */
  grid-row: 1 / 2;         /* Span from row line 1 to 2 */
  grid-column: span 2;     /* Span 2 columns */
  grid-row: span 3;        /* Span 3 rows */
  grid-area: 1 / 1 / 2 / 3; /* row-start / col-start / row-end / col-end */
}
```

## Grid Template Areas

Name grid areas for visual layouts:

```css
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 20px;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
```

## Alignment

```css
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  justify-content: start | end | center | space-between;
  align-content: start | end | center | space-between;
}

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
```

## Complete Example: Dashboard Layout

```css
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
  gap: 0;
}

.dashboard-header {
  grid-area: header;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-sidebar {
  grid-area: sidebar;
  background-color: #2c3e50;
  color: white;
  padding: 1rem;
}

.dashboard-main {
  grid-area: main;
  padding: 2rem;
  background-color: #f5f5f5;
}

.dashboard-footer {
  grid-area: footer;
  padding: 1rem;
  background-color: #333;
  color: white;
  text-align: center;
}
```

## Complete Example: Card Grid

```css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.card-text {
  color: #666;
  margin-bottom: 1rem;
}

.card-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
```

```html
<div class="card-grid">
  <article class="card">
    <img src="image1.jpg" alt="Image 1" class="card-image" />
    <div class="card-content">
      <h3 class="card-title">Card 1</h3>
      <p class="card-text">Description here</p>
      <a href="#" class="card-button">Learn More</a>
    </div>
  </article>
  <article class="card">
    <img src="image2.jpg" alt="Image 2" class="card-image" />
    <div class="card-content">
      <h3 class="card-title">Card 2</h3>
      <p class="card-text">Description here</p>
      <a href="#" class="card-button">Learn More</a>
    </div>
  </article>
</div>
```

## Grid vs Flexbox

| Feature | Grid | Flexbox |
|---------|------|---------|
| Dimensions | 2D (rows + columns) | 1D (row OR column) |
| Best for | Page layouts, card grids | Navigation, components |
| Alignment | Rows and columns | Main axis only |
| Gap | row-gap + column-gap | gap |

## Complete Example: Page Layout

```css
.page {
  display: grid;
  grid-template-columns: 1fr min(100ch, 100%) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.page > * {
  grid-column: 2;
}

.page-header,
.page-footer {
  grid-column: 1 / -1;
}
```

## Best Practices

1. **Use grid for page layouts** — 2D layouts are Grid's strength
2. **Use repeat() for patterns** — Cleaner than listing columns
3. **Use minmax() for responsive** — Flexible with constraints
4. **Use grid-template-areas** — Visual layouts are easier
5. **Combine with Flexbox** — Grid for layout, Flexbox for components

## Common Mistakes

1. **Overusing Grid** — Flexbox is simpler for 1D layouts
2. **Not defining grid-template-columns** — Items won't arrange properly
3. **Forgetting gap** — Manual margins are messy
4. **Not using minmax()** — Items overflow on small screens
5. **Mixing Grid and Flexbox unnecessarily** — Pick the right tool

No changes yet

cancel