CSS Grid Basic - 2D Layout System

1. Basic Grid - 3 Equal Columns

grid-template-columns: 1fr 1fr 1fr; creates 3 equal columns. fr = fraction of available space.

1

2

3

4

5

6

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

2. Different Column Sizes

Mix fixed and flexible sizes: 100px 200px 1fr (1fr takes remaining space).

100px fixed

200px fixed

1fr (fills rest)

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

3. repeat() Function

repeat(4, 1fr) = 1fr 1fr 1fr 1fr (shorter syntax).

1

2

3

4

.grid-3 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

4. Setting Row Heights

grid-template-rows: 100px 150px 100px creates rows with specific heights.

Row 1 (100px)

Row 1

Row 2 (150px)

Row 2

Row 3 (100px)

Row 3

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 150px 100px;
}

5. Separate Row and Column Gaps

row-gap: 30px; (vertical space) and column-gap: 10px; (horizontal space).

Row gap 30px
↓

Item 4

Item 5

Item 6

.grid-5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
    column-gap: 10px;
}

6. Responsive Grid: auto-fit + minmax

repeat(auto-fit, minmax(150px, 1fr)) = as many columns as possible, each at least 150px. Resize your browser!

Item 1

Item 2

Item 3

Item 4

Item 5

.grid-6 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

/* Resize your browser to see columns change! */

7. Grid Template Areas (Visual Layout)

Define named areas and place items in a visual grid. Perfect for page layouts.

MAIN CONTENT

.grid-7 {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    gap: 15px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

8. Spanning Columns

Make items span multiple columns using grid-column: span 2.

1

Span 2 columns

4

Span 3 columns

Span all columns

.grid-8 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.span-2 { grid-column: span 2; } /* Spans 2 columns */
.span-3 { grid-column: span 3; } /* Spans 3 columns */
.span-all { grid-column: 1 / -1; } /* Spans all columns */

9. Nested Grid (Grid inside Grid)

A grid item can also be a grid container.

Parent Item 1

Nested 1

Nested 2

Parent Item 2

Nested A

Nested B

Nested C

Nested D

.grid-9 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

📚 CSS Grid Quick Reference

/* =================================== GRID CONTAINER PROPERTIES =================================== */ display: grid; /* Enables grid */
grid-template-columns: ...; /* Defines columns */
grid-template-rows: ...; /* Defines rows */
gap: 20px; /* Space between rows and columns */
row-gap: 20px; /* Space between rows only */
column-gap: 20px; /* Space between columns only */
justify-items: center; /* Align items horizontally in cells */
align-items: center; /* Align items vertically in cells */
place-items: center; /* Both (shorthand) */
justify-content: center; /* Align entire grid horizontally */
align-content: center; /* Align entire grid vertically */

/* =================================== GRID CHILD PROPERTIES =================================== */ grid-column: span 2; /* Span 2 columns */
grid-column: 1 / 3; /* Start at line 1, end at line 3 */
grid-row: span 2; /* Span 2 rows */
grid-area: header; /* Reference to named area */
justify-self: center; /* Align single item horizontally */
align-self: center; /* Align single item vertically */

/* =================================== COMMON PATTERNS =================================== */ /* Responsive cards grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Page layout (header, sidebar, main, footer) */
.page {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 250px 1fr;
    gap: 20px;
}

🔄 When to Use Grid vs Flexbox

/* =================================== USE GRID WHEN: =================================== */ 1. You need BOTH rows AND columns (2D layout)
2. Creating overall page layout (header, sidebar, main, footer)
3. Complex grid structures like dashboards
4. Gaps between ALL items (row-gap and column-gap)
5. You want to place items EXACTLY where you want

/* =================================== USE FLEXBOX WHEN: =================================== */ 1. You need ONE direction only (row OR column)
2. Navigation bars (horizontal)
3. Centering items (easier than Grid)
4. Distributing space between items
5. When you don't need rows and columns together

/* =================================== YOU CAN USE BOTH TOGETHER! =================================== */ /* Grid for page layout, Flexbox for component layout */
.page { display: grid; } /* Page structure */
.nav { display: flex; } /* Navigation inside header */
.card-group { display: flex; } /* Cards in a row */

🧠 Quick Quiz

/* Question 1: What does 1fr mean in CSS Grid? */ /* Answer: 1 fraction of available space */ /* Question 2: How do you create 3 equal columns? */ /* Answer: grid-template-columns: 1fr 1fr 1fr; or repeat(3, 1fr); */ /* Question 3: What is the difference between gap and row-gap? */ /* Answer: gap = both rows and columns, row-gap = only between rows */ /* Question 4: What makes a grid responsive (columns change based on screen size)? */ /* Answer: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */ /* Question 5: When should you use Grid instead of Flexbox? */ /* Answer: When you need 2D layout (both rows and columns) */