CSS Grid Complete Guide

# CSS Grid Complete Guide

1. Introduction #

2. Learning Objectives #

• Define a grid container and grid tracks.

• Place items perfectly across multiple rows and columns.

• Use fr units to divide space proportionally.

• Build responsive grids using auto-fit and minmax().

3. Detailed Explanations #

Activating CSS Grid #

.container {
    display: grid;
    /* Creates 3 columns, each 200px wide */
    grid-template-columns: 200px 200px 200px;
    gap: 20px;
}

The Magic of fr Units #

.container {
    display: grid;
    /* First col is 1 fraction, second is 2 fractions (twice as wide) */
    grid-template-columns: 1fr 2fr;
}

Grid Template Areas #

.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    grid-template-columns: 250px 1fr;
}

/* Assign elements to those named areas */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Spanning Rows and Columns #

.wide-item {
    grid-column: span 2; /* Stretches across 2 columns */
}

.tall-item {
    grid-row: span 3; /* Stretches down 3 rows */
}

4. Mini Project: Auto-Responsive Photo Gallery #

<div class="gallery">
    <div class="photo">1</div>
    <div class="photo">2</div>
    <div class="photo">3</div>
    <div class="photo">4</div>
</div>

.gallery {
    display: grid;
    /* 
      auto-fit: Add as many columns as will fit.
      minmax(250px, 1fr): Each column must be at least 250px, but can grow.
    */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding: 15px;
}

.photo {
    height: 250px;
    background-color: #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: #94a3b8;
}

5. MCQs #

6. Summary #