CSS Grid Introduction

Master modern layout with CSS Grid

🎯 What is CSS Grid?

CSS Grid is a powerful 2-dimensional layout system that lets you create complex layouts with rows and columns. It's perfect for building modern, responsive web designs. 


/* Simple Grid Example */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
                                    

<div class="grid-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Output:

Item 1
Item 2
Item 3

Key Grid Concepts

📦

Grid Container

The parent element with display: grid 

.container {
    display: grid;
}
🧩

Grid Items

Direct children of the grid container 

.item {
    grid-column: 1 / 3;
}
📏

Grid Lines

The dividing lines that make up the grid 

grid-column-start: 2;
grid-column-end: 4;
🎯

Grid Areas

Rectangular spaces bounded by grid lines 

grid-area: header;

🔹 Creating Your First Grid

Start with a simple 3-column grid: container gets display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;. Add child items; they’ll auto-place into cells. Customize with grid-column or grid-row for spanning. This foundational setup demonstrates Grid’s power for structured layouts. It’s responsive, semantic, and separates presentation from content, improving SEO through clear document structure. 

/* CSS */
.my-grid {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;
    gap: 15px;
    background-color: #f0f0f0;
    padding: 15px;
}

.grid-item {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
}
<div class="my-grid">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

Output:

1
2
3
4
5
6

🔹 Responsive Grid with fr Units

Use fractional units (fr) for flexible, responsive grids that adapt to container size. Example: grid-template-columns: 1fr 2fr 1fr; allocates space proportionally. The fr unit distributes leftover space after fixed tracks, creating fluid columns without media queries. Combine with minmax() for minimum sizes. Ideal for layouts requiring balanced, adaptable columns like content-sidebar patterns or card grids, enhancing UX and performance. 

/* Responsive Grid */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    min-height: 200px;
}

.box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
<div class="responsive-grid">
    <div class="box">Sidebar</div>
    <div class="box">Main Content</div>
    <div class="box">Ads</div>
</div>

Output:

Sidebar
Main Content
Ads

🔹 Grid vs Flexbox

CSS Grid and Flexbox serve distinct layout purposes. Grid is ideal for two-dimensional layouts—rows and columns simultaneously—like full page designs or complex card grids. Flexbox excels in one-dimensional arrangements, such as navigation bars or aligning items within a single row or column. Use Grid when you need precise control over both axes; choose Flexbox for distributing space along a single axis or dynamically wrapping items. Understanding their strengths ensures cleaner, more maintainable, and performant responsive designs.

Use CSS Grid when:

  • 2D Layout: You need both rows and columns
  • Complex Layouts: Magazine-style or dashboard layouts
  • Overlapping Elements: Items need to overlap
  • Gap Control: You want consistent spacing

Use Flexbox when:

  • 1D Layout: Single row or column
  • Component Layout: Navigation bars, buttons
  • Content-Based: Size based on content
  • Alignment: Centering items

🧠 Test Your Knowledge

What CSS property creates a grid container?