CSS Grid Layout: Build Complex Layouts with Ease

CSS Grid is a powerful two-dimensional layout system that makes creating complex web layouts simple. Unlike Flexbox (which is one-dimensional), Grid allows you to control both rows and columns simultaneously.

When to Use Grid vs Flexbox

• Grid — Two-dimensional layouts (rows AND columns)
• Flexbox — One-dimensional layouts (row OR column)

Often, you'll use both together: Grid for the overall page layout, Flexbox for component layouts.

Basic Grid Concepts

Creating a Grid Container

.container {
    display: grid;
}

Defining Columns

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px; / Three 200px columns /
    grid-template-columns: 1fr 1fr 1fr;       / Three equal columns /
    grid-template-columns: repeat(3, 1fr);    / Shorthand for above /
    grid-template-columns: 1fr 2fr 1fr;       / Middle column is twice as wide /
}

Defining Rows

.container {
    grid-template-rows: 100px 200px;      / Two rows: 100px and 200px /
    grid-template-rows: auto auto auto;   / Height based on content /
    grid-template-rows: repeat(3, 100px); / Three 100px rows /
}

Gap (Gutters)

.container {
    gap: 20px;           / Gap between all rows and columns /
    row-gap: 10px;       / Gap between rows only /
    column-gap: 20px;    / Gap between columns only /
}

Placing Grid Items

Automatic Placement

By default, items flow into grid cells automatically:

    
1

    
2

    
3

    
4

    
5

    
6

Manual Placement

Control exactly where items go:

.item {
    grid-column: 1 / 3;  / Start at column 1, end at column 3 /
    grid-row: 1 / 2;     / Start at row 1, end at row 2 /
}
/ Shorthand /
.item {
    grid-column: span 2; / Span 2 columns /
    grid-row: span 3;    / Span 3 rows /
}

The fr Unit

The fr (fraction) unit distributes available space:

.container {
    grid-template-columns: 1fr 2fr 1fr;
    / First and third columns: 25% each /
    / Second column: 50% /
}

Mix fixed and flexible units:

.container {
    grid-template-columns: 200px 1fr;
    / 200px sidebar, rest is main content /
}

Grid Template Areas

Name areas for readable layouts:

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Responsive Grids

Using auto-fit and auto-fill

Create responsive grids without media queries:

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

• auto-fit — Columns stretch to fill space
• auto-fill — Columns maintain minimum size, creates empty tracks

With Media Queries

.container {
    display: grid;
    grid-template-columns: 1fr; / Mobile: single column /
}
@media (min-width: 768px) {
    .container {
        grid-template-columns: 1fr 1fr; / Tablet: two columns /
    }
}
@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(3, 1fr); / Desktop: three columns /
    }
}

Alignment

Aligning Items in Cells

.container {
    justify-items: start | end | center | stretch;   / Horizontal /
    align-items: start | end | center | stretch;     / Vertical /
    place-items: center center;                       / Shorthand /
}
/ Single item /
.item {
    justify-self: center;
    align-self: end;
}

Aligning the Grid Itself

.container {
    justify-content: start | end | center | space-between;  / Horizontal /
    align-content: start | end | center | space-between;    / Vertical /
}

Complete Layout Example

Try this Holy Grail layout in ProLiveEditor:

    
Header

    
    
Main Content

    
    

.page {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 10px;
}
header { grid-area: header; background: #3498db; }
nav { grid-area: nav; background: #e74c3c; }
main { grid-area: main; background: #2ecc71; }
aside { grid-area: aside; background: #9b59b6; }
footer { grid-area: footer; background: #34495e; }
/ All grid areas /
.page > * {
    padding: 20px;
    color: white;
}
/ Responsive /
@media (max-width: 768px) {
    .page {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
    }
}

Grid makes complex layouts simple. Practice in ProLiveEditor to see how Grid changes your approach to web layout!