Grid Layout in CSS - johnverz22/webdev1-lessons GitHub Wiki

Table of Contents

Introduction to CSS Grid

CSS Grid is a powerful layout system that allows for two-dimensional (rows and columns) design. It provides greater flexibility than Flexbox when dealing with complex layouts.

Basic Grid Properties

Property Description
display: grid; Enables grid layout on an element
grid-template-columns Defines the number and size of columns
grid-template-rows Defines the number and size of rows
grid-gap or gap Adds spacing between grid items
grid-column Specifies how many columns an item spans
grid-row Specifies how many rows an item spans
justify-items Aligns items horizontally (start, center, end, stretch)
align-items Aligns items vertically (start, center, end, stretch)
justify-content Aligns the entire grid horizontally
align-content Aligns the entire grid vertically

Step-by-Step Practice

1. Creating a Grid Container

<div class="grid-container">
    <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>
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    background: #f4f4f4;
    padding: 10px;
}
.grid-item {
    background: steelblue;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}

2. Defining Custom Column Sizes

.grid-container {
    grid-template-columns: 100px 1fr 2fr;
}

3. Making Items Span Multiple Columns

.grid-item:nth-child(1) {
    grid-column: span 2;
}

Common Use Cases

  • Dashboard Layouts
  • Photo Galleries
  • Product Listings
  • Responsive Web Design
  • Complex UI Grids

CSS Grid vs. Flexbox

Feature CSS Grid Flexbox
Layout Type Two-dimensional (rows & columns) One-dimensional (row OR column)
Alignment Can align both rows and columns at once Aligns items along a single axis
Content Size Adaptation Best for structured, grid-based layouts Best for dynamically adjusting items
Positioning Can place items anywhere in the grid Items adjust based on content flow
Example Use Case Dashboards, galleries, forms Navigation bars, flexible lists, cards

When to Use Which?

  • Use Grid when creating structured layouts that need both rows and columns.
  • Use Flexbox for single-row or single-column layouts, like navigation bars and lists.
  • Combine Both when necessary—use Grid for the main layout and Flexbox inside grid items for finer control.

Practical Example

A simple responsive grid layout:

<div class="photo-gallery">
    <img src="https://via.placeholder.com/150" alt="Sample Image">
    <img src="https://via.placeholder.com/150" alt="Sample Image">
    <img src="https://via.placeholder.com/150" alt="Sample Image">
</div>
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.photo-gallery img {
    width: 100%;
    height: auto;
}

This ensures a flexible, responsive gallery that adapts to screen size.

⚠️ **GitHub.com Fallback** ⚠️