CSS Grid

CSS Grid Layout System

Create complex two-dimensional layouts with rows and columns. Grid is perfect for page layouts and complex designs.

💻 Grid Basics

/* Enable Grid */
.container {
    display: grid;      /* Block-level grid container */
    /* OR */
    display: inline-grid;  /* Inline-level grid container */
}

/* Basic terminology */
/* Container: Element with display: grid */
/* Items: Direct children of container */
/* Grid lines: Dividing lines (rows and columns) */
/* Grid tracks: Space between two lines */
/* Grid cell: Single unit */
/* Grid area: Rectangular area (multiple cells) */

🎯 Defining Grid Structure

grid-template-columns

/* Define column tracks */
.grid {
    display: grid;
    
    /* Fixed widths */
    grid-template-columns: 200px 300px 200px;
    
    /* Flexible units (fr) */
    grid-template-columns: 1fr 2fr 1fr;  /* 1:2:1 ratio */
    
    /* Mix fixed and flexible */
    grid-template-columns: 250px 1fr 250px;
    
    /* Auto */
    grid-template-columns: auto auto auto;
    
    /* Repeat function */
    grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
    grid-template-columns: repeat(4, 200px);
    
    /* Auto-fit and auto-fill */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-columns: repeat(auto-fill, 200px);
}

/* Examples */
.three-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sidebar-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
}

grid-template-rows

/* Define row tracks */
.grid {
    display: grid;
    
    /* Fixed heights */
    grid-template-rows: 100px 200px 100px;
    
    /* Flexible */
    grid-template-rows: 1fr 2fr 1fr;
    
    /* Auto (based on content) */
    grid-template-rows: auto auto auto;
    
    /* Min/max */
    grid-template-rows: minmax(100px, auto);
}

/* Examples */
.full-page {
    display: grid;
    grid-template-rows: 60px 1fr 80px;  /* Header, content, footer */
    min-height: 100vh;
}

grid-template-areas

/* Named grid areas */
.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr 80px;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

/* Assign items to areas */
.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

/* Responsive layout */
@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "footer";
    }
}

gap

/* Space between tracks */
.grid {
    display: grid;
    
    /* Same gap for rows and columns */
    gap: 20px;
    
    /* Different gaps */
    gap: 20px 40px;  /* row-gap column-gap */
    
    /* Individual properties */
    row-gap: 20px;
    column-gap: 40px;
}

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

📍 Item Placement

Line-based Placement

/* Place items by line numbers */
.item {
    /* Column placement */
    grid-column-start: 1;
    grid-column-end: 3;     /* Spans 2 columns */
    
    /* Shorthand */
    grid-column: 1 / 3;     /* Start / End */
    grid-column: 1 / span 2; /* Start / Span */
    
    /* Row placement */
    grid-row-start: 1;
    grid-row-end: 3;
    
    /* Shorthand */
    grid-row: 1 / 3;
    grid-row: 1 / span 2;
}

/* Ultra shorthand */
.item {
    grid-area: row-start / col-start / row-end / col-end;
    grid-area: 1 / 1 / 3 / 3;
}

/* Examples */
.featured {
    grid-column: 1 / -1;    /* Full width (-1 = last line) */
}

.wide {
    grid-column: span 2;    /* Spans 2 columns */
}

.tall {
    grid-row: span 3;       /* Spans 3 rows */
}

Named Lines

/* Name grid lines */
.grid {
    display: grid;
    grid-template-columns: 
        [sidebar-start] 250px 
        [sidebar-end content-start] 1fr 
        [content-end];
    grid-template-rows: 
        [header-start] 60px 
        [header-end content-start] 1fr 
        [content-end footer-start] 80px 
        [footer-end];
}

/* Use named lines */
.content {
    grid-column: content-start / content-end;
    grid-row: content-start / content-end;
}

🎨 Alignment

Justify Items (Inline/Horizontal)

/* Align all items horizontally within their cells */
.grid {
    display: grid;
    justify-items: stretch;    /* Default: fill cell */
    justify-items: start;      /* Align to start */
    justify-items: end;        /* Align to end */
    justify-items: center;     /* Center */
}

/* Individual item */
.item {
    justify-self: center;
}

Align Items (Block/Vertical)

/* Align all items vertically within their cells */
.grid {
    display: grid;
    align-items: stretch;    /* Default: fill cell */
    align-items: start;      /* Align to start */
    align-items: end;        /* Align to end */
    align-items: center;     /* Center */
}

/* Individual item */
.item {
    align-self: center;
}

Justify Content (Grid Alignment)

/* Align entire grid horizontally within container */
.grid {
    display: grid;
    justify-content: start;
    justify-content: end;
    justify-content: center;
    justify-content: stretch;       /* Default */
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
}

Align Content (Grid Alignment)

/* Align entire grid vertically within container */
.grid {
    display: grid;
    align-content: start;
    align-content: end;
    align-content: center;
    align-content: stretch;       /* Default */
    align-content: space-between;
    align-content: space-around;
    align-content: space-evenly;
}

place-items & place-content (Shorthand)

/* Shorthand for align and justify */
.grid {
    display: grid;
    
    /* align-items and justify-items */
    place-items: center;           /* Both centered */
    place-items: start end;        /* align-items / justify-items */
    
    /* align-content and justify-content */
    place-content: center;
    place-content: start end;
}

/* Individual item */
.item {
    place-self: center;
    place-self: start end;
}

⚙️ Advanced Features

Auto-placement

/* Control automatic item placement */
.grid {
    display: grid;
    grid-auto-flow: row;        /* Default: fill rows */
    grid-auto-flow: column;     /* Fill columns */
    grid-auto-flow: dense;      /* Fill gaps */
}

/* Size of implicit tracks */
.grid {
    grid-auto-rows: 200px;      /* Auto-created rows */
    grid-auto-columns: 150px;   /* Auto-created columns */
}

Implicit vs Explicit Grid

/* Explicit: Defined by grid-template-* */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Explicit: 3 columns */
    grid-template-rows: 100px 200px;        /* Explicit: 2 rows */
}

/* Implicit: Auto-created for extra items */
.grid {
    grid-auto-rows: 150px;  /* Size for implicit rows */
}

minmax() Function

/* Define min and max sizes */
.grid {
    display: grid;
    
    /* Minimum 200px, maximum 1fr */
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    
    /* Minimum 100px, maximum auto (content size) */
    grid-template-rows: minmax(100px, auto);
}

/* Responsive grid without media queries */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

auto-fit vs auto-fill

/* auto-fill: Creates as many tracks as fit */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* Empty tracks remain */
}

/* auto-fit: Collapses empty tracks */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* Items expand to fill space */
}

🎯 Practical Examples

/* Holy Grail layout */
.layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar content ads"
        "footer footer footer";
    min-height: 100vh;
    gap: 20px;
}

/* Dashboard */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar content";
    min-height: 100vh;
}

.header {
    grid-area: header;
    padding: 20px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sidebar {
    grid-area: sidebar;
    background: #2c3e50;
    color: white;
    padding: 20px;
}

.content {
    grid-area: content;
    padding: 20px;
}

/* Card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

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

/* Featured card spans 2 columns */
.card.featured {
    grid-column: span 2;
}

/* Image gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    gap: 10px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Large image spans 2x2 */
.gallery-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

/* Wide image */
.gallery-item.wide {
    grid-column: span 2;
}

/* Tall image */
.gallery-item.tall {
    grid-row: span 2;
}

/* Responsive form */
.form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form .full-width {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .form {
        grid-template-columns: 1fr;
    }
}

/* Calendar */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    background: #e0e0e0;
    padding: 2px;
}

.calendar-day {
    background: white;
    padding: 10px;
    min-height: 80px;
}

.calendar-day.today {
    background: #e3f2fd;
}

/* Masonry-like layout */
.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 20px;
    gap: 20px;
}

.masonry-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Items span different heights */
.masonry-item.small {
    grid-row: span 5;
}

.masonry-item.medium {
    grid-row: span 10;
}

.masonry-item.large {
    grid-row: span 15;
}

/* Product listing */
.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px;
}

.product {
    display: grid;
    grid-template-rows: 250px auto auto auto;
    gap: 15px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    padding: 0 20px;
}

.product-actions {
    padding: 0 20px 20px;
    margin-top: auto;
}

🎯 Key Takeaways

display: grid: Enable grid on container
grid-template-columns/rows: Define grid structure
fr unit: Flexible fraction of available space
repeat(): Repeat track definitions efficiently
minmax(): Set minimum and maximum track sizes
grid-template-areas: Name and assign areas visually
auto-fit/auto-fill: Create responsive grids without media queries
Grid is two-dimensional: Control both rows and columns simultaneously