CSS Grid

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

Grid Container

Enable grid on a parent element:

.container {
  display: grid;
}

Defining Columns and Rows

.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:

.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:

.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:

.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:

.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:

.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

.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

.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

.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;
}

<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

Complete Example: Page Layout

.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