COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

CSS Grid Gap

The gap property is used to create space between rows and columns inside a CSS Grid container.

It provides a simple way to control the spacing between Grid items without adding margins to each individual item.

What is Grid Gap?

The gap property defines the space between Grid rows and columns.

It works only between Grid items. It does not create space outside the Grid container.

Basic Syntax

.container {
    display: grid;
    gap: 20px;
}

The gap property creates 20px of space between the Grid rows and columns.

Grid Gap Diagram

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

The space between Grid items is controlled by the gap property.

row-gap

The row-gap property controls the vertical space between Grid rows.

.container {
    display: grid;
    row-gap: 20px;
}

This creates 20px of vertical space between the Grid rows.

column-gap

The column-gap property controls the horizontal space between Grid columns.

.container {
    display: grid;
    column-gap: 30px;
}

This creates 30px of horizontal space between Grid columns.

Different Row and Column Gaps

.container {
    display: grid;
    row-gap: 20px;
    column-gap: 30px;
}

The Grid has 20px vertical spacing between rows.

The Grid has 30px horizontal spacing between columns.

Gap Shorthand

The gap property can be used as shorthand for both row and column gaps.

.container {
    display: grid;
    gap: 20px 30px;
}

The first value, 20px, represents the row gap.

The second value, 30px, represents the column gap.

Therefore: row gap = 20px and column gap = 30px.

Gap with One Value

.container {
    display: grid;
    gap: 15px;
}

When one value is used, the same 15px gap is applied between both rows and columns.

Gap with Two Values

.container {
    display: grid;
    gap: 10px 25px;
}

The first value 10px defines the row gap.

The second value 25px defines the column gap.

Output

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5

Grid Item 6

The output uses gap: 20px;, so equal 20px spacing appears between both rows and columns.

Gap vs Margin

gap

Creates consistent spacing between Grid items.

margin

Creates space around individual elements.

Important Gap Properties

gap

Controls both row and column spacing.

row-gap

Controls vertical spacing between Grid rows.

column-gap

Controls horizontal spacing between Grid columns.

Example 🤓🌍

A course card layout can use the gap property to create consistent spacing between course cards.

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

The Grid contains three equal columns.

A 20px gap is automatically created between the course cards.

Real-World Uses

Course card layouts
Product grids
Image galleries
Dashboard cards
Portfolio layouts
Admin panels

Important: The gap property creates space between Grid rows and columns. It does not create outer space around the Grid container.

Summary

The gap property controls the spacing between CSS Grid items. row-gap controls vertical spacing, while column-gap controls horizontal spacing. The shorthand gap can be used to control both values together.

← Previous: Grid Template Rows

Next: Grid Column →