CSS 18 💻 Grid Layout Introduction - KandZ

CSS Grid is a two-dimensional layout system introduced in CSS3. It provides a powerful and flexible way to create complex, responsive layouts by defining rows and columns.

What is CSS Grid?

CSS Grid allows you to arrange elements into rows and columns, giving you precise control over the layout of your web page. Unlike Flexbox (which is one-dimensional), Grid works in two dimensions simultaneously.

Key Benefits:

Benefit	Description
Two-dimensional	Controls both rows and columns at the same time
Precise control	Exact placement of items in the grid
Responsive	Easily adapts to different screen sizes
Flexible	Supports fractions, min/max sizes, and repeat patterns
Clean markup	No need for extra wrapper divs

Basic Grid Setup

<div class="grid-container">
    <div class="grid-item">Grid Item 1</div>
    <div class="grid-item">Grid Item 2</div>
    <div class="grid-item">Grid Item 3</div>
    <div class="grid-item">Grid Item 4</div>
    <div class="grid-item">Grid Item 5</div>
    <div class="grid-item">Grid Item 6</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-gap: 10px;
}

What happens:

display: grid; — Turns the element into a grid container
grid-template-columns: 100px 200px 100px; — Creates three columns with specific widths
grid-gap: 10px; — Sets the gap between rows and columns
Children automatically flow into the grid cells

1. grid-template-columns

Defines the number and size of columns in the grid.

/* Three fixed-width columns */
.grid-container {
    grid-template-columns: 100px 200px 100px;
}

/* Two equal columns */
.grid-container {
    grid-template-columns: 1fr 1fr;
}

/* Mixed units */
.grid-container {
    grid-template-columns: 100px 1fr 200px;
}

2. grid-template-rows

Defines the number and size of rows in the grid.

/* Three fixed-height rows */
.grid-container {
    grid-template-rows: 100px 200px 100px;
}

/* Two equal rows */
.grid-container {
    grid-template-rows: 1fr 1fr;
}

3. The fr Unit (Fraction of Available Space)

The fr unit represents a fraction of the available space. The total space is divided equally among all fractional units.

/* 1fr : 2fr : 3fr ratio */
.grid-container {
    grid-template-columns: 1fr 2fr 3fr;
}

Calculation:

Total = 1 + 2 + 3 = 6 parts
Column 1 = 1/6 of available space
Column 2 = 2/6 (1/3) of available space
Column 3 = 3/6 (1/2) of available space

4. Value Keywords

Grid columns and rows also accept keyword values for more flexible sizing.

Keyword	Description	Example
`max-content`	Takes up the maximum possible space	`grid-template-columns: max-content;`
`min-content`	Takes up the minimum possible space	`grid-template-columns: min-content;`
`minmax(min, max)`	Sets minimum and maximum dimensions	`grid-template-columns: minmax(100px, 200px);`
`auto`	Takes up remaining space	`grid-template-columns: auto;`
`repeat(n, size)`	Repeats a pattern	`grid-template-columns: repeat(3, 100px);`

5. minmax()

The minmax() function specifies the minimum and maximum possible dimensions for a grid track.

.grid-container {
    grid-template-columns: minmax(100px, 200px) auto;
}

What happens:

First column: minimum 100px, maximum 200px
Second column: takes up any remaining space

6. repeat()

The repeat() function creates columns or rows by repeating a pattern.

/* Three equal columns */
.grid-container {
    grid-template-columns: repeat(3, 100px);
}

/* Three equal fractional columns */
.grid-container {
    grid-template-columns: repeat(3, 1fr);
}

/* Repeating pattern */
.grid-container {
    grid-template-columns: repeat(3, 100px 200px);
}

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout Introduction</title>
    <style>
        *, *::before, *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== GRID DEMOS ====== */
        .grid-container {
            display: grid;
            gap: 10px;
            margin: 15px 0;
            background: #e9ecef;
            padding: 10px;
            border-radius: 8px;
        }

        .grid-item {
            background: #007bff;
            color: white;
            padding: 20px;
            border-radius: 6px;
            text-align: center;
            font-weight: bold;
        }

        .grid-item:nth-child(even) {
            background: #28a745;
        }

        .grid-item:nth-child(3n) {
            background: #dc3545;
        }

        /* Fixed columns */
        .grid-fixed {
            grid-template-columns: 100px 200px 100px;
        }

        /* Fractional columns */
        .grid-fr {
            grid-template-columns: 1fr 2fr 1fr;
        }

        /* Equal columns */
        .grid-equal {
            grid-template-columns: repeat(3, 1fr);
        }

        /* Repeat pattern */
        .grid-repeat {
            grid-template-columns: repeat(3, 100px);
        }

        /* minmax */
        .grid-minmax {
            grid-template-columns: minmax(100px, 200px) auto;
        }

        /* Rows */
        .grid-rows {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 100px 150px;
        }

        /* Responsive grid */
        .grid-responsive {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        }

        .note {
            font-size: 0.9rem;
            color: #6c757d;
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <h1>CSS Grid Layout Introduction</h1>

    <!-- ====== 1. BASIC GRID ====== -->
    <section>
        <h2>1. Basic Grid (Fixed Columns)</h2>
        <p>Three columns with fixed widths: <code>100px 200px 100px</code></p>

        <div class="grid-container grid-fixed">
            <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>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: 100px 200px 100px;
                gap: 10px;
            }
        </div>
    </section>

    <!-- ====== 2. FRACTIONAL COLUMNS ====== -->
    <section>
        <h2>2. Fractional Columns (fr)</h2>
        <p>Columns in ratio <code>1fr 2fr 1fr</code> — the middle column is twice as wide.</p>

        <div class="grid-container grid-fr">
            <div class="grid-item">1fr</div>
            <div class="grid-item">2fr</div>
            <div class="grid-item">1fr</div>
            <div class="grid-item">1fr</div>
            <div class="grid-item">2fr</div>
            <div class="grid-item">1fr</div>
        </div>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: 1fr 2fr 1fr;
                gap: 10px;
            }
        </div>
    </section>

    <!-- ====== 3. EQUAL COLUMNS ====== -->
    <section>
        <h2>3. Equal Columns (repeat)</h2>
        <p>Three equal columns using <code>repeat(3, 1fr)</code>.</p>

        <div class="grid-container grid-equal">
            <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>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }
        </div>
    </section>

    <!-- ====== 4. REPEAT WITH FIXED SIZE ====== -->
    <section>
        <h2>4. Repeat with Fixed Size</h2>
        <p>Three columns of exactly 100px each using <code>repeat(3, 100px)</code>.</p>

        <div class="grid-container grid-repeat">
            <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>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 100px);
                gap: 10px;
            }
        </div>
    </section>

    <!-- ====== 5. MINMAX ====== -->
    <section>
        <h2>5. minmax()</h2>
        <p>First column: <code>minmax(100px, 200px)</code>, second column: <code>auto</code>.</p>

        <div class="grid-container grid-minmax">
            <div class="grid-item">minmax(100px, 200px)</div>
            <div class="grid-item">auto (remaining space)</div>
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
        </div>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: minmax(100px, 200px) auto;
                gap: 10px;
            }
        </div>
    </section>

    <!-- ====== 6. ROWS ====== -->
    <section>
        <h2>6. Grid with Rows</h2>
        <p>Two columns and two rows with different heights.</p>

        <div class="grid-container grid-rows">
            <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>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 100px 150px;
                gap: 10px;
            }
        </div>
    </section>

    <!-- ====== 7. RESPONSIVE GRID ====== -->
    <section>
        <h2>7. Responsive Grid (auto-fit)</h2>
        <p>Columns automatically wrap based on available space using <code>repeat(auto-fit, minmax(150px, 1fr))</code>.</p>

        <div class="grid-container grid-responsive">
            <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 class="grid-item">7</div>
            <div class="grid-item">8</div>
        </div>

        <div class="code-block">
            .grid-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 10px;
            }
        </div>
        <p class="note">Resize the browser to see the columns wrap automatically.</p>
    </section>

    <!-- ====== REFERENCE TABLES ====== -->
    <section>
        <h2>8. Reference Tables</h2>

        <h3>Grid Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>display</code></td>
                <td>Enables grid layout</td>
                <td><code>display: grid;</code></td>
            </tr>
            <tr>
                <td><code>grid-template-columns</code></td>
                <td>Defines columns</td>
                <td><code>grid-template-columns: 1fr 1fr;</code></td>
            </tr>
            <tr>
                <td><code>grid-template-rows</code></td>
                <td>Defines rows</td>
                <td><code>grid-template-rows: 100px auto;</code></td>
            </tr>
            <tr>
                <td><code>gap</code> / <code>grid-gap</code></td>
                <td>Sets gap between rows and columns</td>
                <td><code>gap: 10px;</code></td>
            </tr>
        </table>

        <h3>Grid Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>length</code></td>
                <td>Fixed size (px, em, rem)</td>
                <td><code>100px</code></td>
            </tr>
            <tr>
                <td><code>percentage</code></td>
                <td>Percentage of container</td>
                <td><code>50%</code></td>
            </tr>
            <tr>
                <td><code>fr</code></td>
                <td>Fraction of available space</td>
                <td><code>1fr</code>, <code>2fr</code></td>
            </tr>
            <tr>
                <td><code>auto</code></td>
                <td>Remaining space</td>
                <td><code>auto</code></td>
            </tr>
            <tr>
                <td><code>min-content</code></td>
                <td>Minimum possible space</td>
                <td><code>min-content</code></td>
            </tr>
            <tr>
                <td><code>max-content</code></td>
                <td>Maximum possible space</td>
                <td><code>max-content</code></td>
            </tr>
            <tr>
                <td><code>minmax(min, max)</code></td>
                <td>Minimum and maximum dimensions</td>
                <td><code>minmax(100px, 200px)</code></td>
            </tr>
            <tr>
                <td><code>repeat(n, size)</code></td>
                <td>Repeats a pattern</td>
                <td><code>repeat(3, 1fr)</code></td>
            </tr>
        </table>

        <h3>repeat() Variations</h3>
        <table class="reference-table">
            <tr>
                <th>Example</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>repeat(3, 1fr)</code></td>
                <td>Three equal fractional columns</td>
            </tr>
            <tr>
                <td><code>repeat(3, 100px)</code></td>
                <td>Three fixed 100px columns</td>
            </tr>
            <tr>
                <td><code>repeat(auto-fit, minmax(150px, 1fr))</code></td>
                <td>Responsive columns that wrap</td>
            </tr>
            <tr>
                <td><code>repeat(auto-fill, minmax(150px, 1fr))</code></td>
                <td>Like auto-fit, but keeps empty tracks</td>
            </tr>
        </table>
    </section>

    <!-- ====== BEST PRACTICES ====== -->
    <section>
        <h2>9. Best Practices</h2>

        <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
            <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
            <ul>
                <li>Use <code>fr</code> units for flexible, responsive columns</li>
                <li>Use <code>repeat()</code> to avoid repetitive code</li>
                <li>Use <code>minmax()</code> with <code>auto-fit</code> for responsive grids</li>
                <li>Use <code>gap</code> instead of margins on grid items</li>
                <li>Use <code>grid-template-areas</code> for complex layouts (next lesson)</li>
            </ul>
        </div>

        <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
            <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
            <ul>
                <li>Don't use fixed pixel widths for responsive layouts</li>
                <li>Don't use margins on grid items (use gap instead)</li>
                <li>Don't forget <code>display: grid</code> — nothing will work without it</li>
                <li>Don't overcomplicate — Grid is powerful but start simple</li>
            </ul>
        </div>
    </section>

</body>
</html>

Quick Reference

Property	Description	Example
`display: grid`	Enables grid layout	`display: grid;`
`grid-template-columns`	Defines columns	`grid-template-columns: 1fr 2fr 1fr;`
`grid-template-rows`	Defines rows	`grid-template-rows: 100px auto;`
`gap` / `grid-gap`	Gap between cells	`gap: 10px;`

Grid Values

Value	Description	Example
`length`	Fixed size	`100px`
`percentage`	Percentage of container	`50%`
`fr`	Fraction of available space	`1fr`, `2fr`
`auto`	Remaining space	`auto`
`min-content`	Minimum possible space	`min-content`
`max-content`	Maximum possible space	`max-content`
`minmax(min, max)`	Min and max dimensions	`minmax(100px, 200px)`
`repeat(n, size)`	Repeats a pattern	`repeat(3, 1fr)`

Best Practices

✅ Do This:

/* Responsive grid that wraps automatically */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Use fr for flexible columns */
.layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 15px;
}

❌ Don’t Do This:

/* Don't use fixed widths for responsive layouts */
.grid {
    grid-template-columns: 300px 300px 300px;
    /* Breaks on smaller screens */
}

/* Don't use margins on grid items */
.grid-item {
    margin: 10px; /* Use gap on the container instead */
}

Pro Tip: CSS Grid is the most powerful layout system in CSS. Start with display: grid and grid-template-columns, then add rows and gaps. Use repeat(auto-fit, minmax(250px, 1fr)) for a responsive grid that automatically adjusts to the screen size. In the next lesson, you’ll learn about grid-template-areas for even more complex layouts!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!