CSS Grid Layout - CSS Course

Introduction to CSS Grid: grid-template-columns, grid-template-rows

Contents hide

1) Introduction to CSS Grid: grid-template-columns, grid-template-rows

1.1) What is CSS Grid?

1.2) Grid-template-columns – Define Column Tracks

1.3) Grid-template-rows – Define Row Tracks

2) Creating grid layouts with grid-gap

2.1) What is grid-gap?

3) Grid item placement and spanning across multiple cells

3.1) Manual Grid Item Placement

4) Responsive design using Grid

4.1) Why Use Grid for Responsive Design?

CSS Grid is a two-dimensional layout system for the web, enabling developers to build complex responsive layouts with ease. Two of the most foundational properties in CSS Grid are grid-template-columns and grid-template-rows, which define the structure of the grid.

What is CSS Grid?

CSS Grid allows you to lay out items in rows and columns simultaneously, giving precise control over placement, spacing, and alignment—ideal for layouts like dashboards, image galleries, and web pages.

To begin using it, you simply declare:

.container {
display: grid;
}

Grid-template-columns – Define Column Tracks

This property sets the number and size of columns in the grid container.

Syntax:

grid-template-columns: column-size column-size …;

Examples:

/* 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;

/* 2 fixed-width columns */
grid-template-columns: 200px 300px;

/* Auto + flexible */
grid-template-columns: auto 1fr;

/* Repeat function */
grid-template-columns: repeat(3, 1fr);

fr = fractional unit of available space.
auto = based on content size.
px, em, % = fixed or relative units.

Grid-template-rows – Define Row Tracks

This property works the same way as grid-template-columns, but for rows.

Examples:

/* 2 fixed-height rows */
grid-template-rows: 100px 150px;

/* 3 flexible rows */
grid-template-rows: 1fr 2fr 1fr;

/* Repeat 4 auto rows */
grid-template-rows: repeat(4, auto);

Full Example: 3×2 Grid

<div class=”grid-container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
<div class=”item”>5</div>
<div class=”item”>6</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 150px;
gap: 10px;
}
.item {
background: #eaeaea;
padding: 20px;
text-align: center;
}

This creates:

3 columns of equal width
2 rows with specific heights
Uniform spacing with gap

Quick Tips:

Property	Purpose
grid-template-columns	Defines how many columns and their size
grid-template-rows	Defines how many rows and their size
fr unit	Fraction of remaining space
repeat(n, value)	Shortcut for repeating patterns

Would you like a visual diagram of grid tracks or a code sandbox to try this interactively?

Creating grid layouts with grid-gap

When building responsive and structured layouts using CSS Grid, managing spacing between grid items is essential for a clean design. The grid-gap property (now commonly referred to as gap) is a powerful tool that simplifies spacing between rows and columns in a grid layout.

What is grid-gap?

grid-gap defines the space between grid rows and columns without adding extra margins inside grid items themselves. It improves layout clarity and consistency compared to manually setting margins.

Syntax:

.container {
display: grid;
grid-gap: 20px; /* shorthand for row and column gaps */
}

grid-gap is shorthand for:
row-gap (vertical space)
column-gap (horizontal space)

In modern CSS, just use gap, as it’s supported in both Grid and Flexbox.

One-Directional Gaps

.container {
display: grid;
row-gap: 10px; /* vertical spacing */
column-gap: 15px; /* horizontal spacing */
}

Or shorthand:

.container {
display: grid;
gap: 10px 15px; /* row gap then column gap */
}

Example: 3×2 Grid with Gaps

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
gap: 20px;
}
.item {
background-color: #f0f0f0;
padding: 1rem;
text-align: center;
}

This creates:

A 3-column, 2-row layout
Uniform 20px spacing between items (both rows and columns)

Why Use gap Instead of Margins?

Feature	gap	margin
Affects only spacing between grid items	YES	NO
Keeps alignment within grid tracks	YES	NO
Easier to maintain consistency	YES	NO

Summary:

gap is the modern way to space grid items.
Works seamlessly with both rows and columns.
Helps avoid layout bugs from negative margins or spacing inconsistencies.
Combine with grid-template-columns/rows for complete control.

Would you like a visual grid gap demo or guidance on how gap works in nested grids or media queries?

Grid item placement and spanning across multiple cells

CSS Grid provides precise control over where each item appears in the grid and allows you to make items span across multiple rows and/or columns, enabling complex and responsive designs without relying on float or position hacks.

Manual Grid Item Placement

Each grid item can be placed explicitly using:

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Example:

.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}

This places .item1 from column 1 to 3 and row 1 to 2, spanning two columns but only one row.

Simplified Shorthand

You can also use:

.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}

Or let the browser calculate the end position automatically:

.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 1;
}

span 2 means the item will occupy 2 tracks starting from position 1.

Example Layout with Spanning

<div class=”grid”>
<div class=”item item1″>1</div>
<div class=”item item2″>2</div>
<div class=”item item3″>3</div>
<div class=”item item4″>4</div>
</div>

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px 150px;
gap: 10px;
}
.item1 {
grid-column: 1 / span 2; /* spans 2 columns */
grid-row: 1;
}
.item2 {
grid-column: 3;
grid-row: 1 / span 2; /* spans 2 rows */
}
.item3 {
grid-column: 1;
grid-row: 2;
}
.item4 {
grid-column: 2;
grid-row: 2;
}

This layout:

Makes item1 span 2 columns
Makes item2 span 2 rows
Leaves item3 and item4 in default 1×1 cells

Named Grid Lines (Advanced)

You can name grid lines for more semantic placement:

.grid {
grid-template-columns: [start] 1fr [middle] 1fr [end];
}
.item1 {
grid-column: start / middle;
}

Summary Table:

Property	Use
grid-column-start	Sets where item starts horizontally
grid-column-end	Sets where item ends horizontally
grid-row-start	Sets where item starts vertically
grid-row-end	Sets where item ends vertically
span	Spans multiple columns or rows
grid-column	Shorthand for column start / end
grid-row	Shorthand for row start / end

Would you like a live code example, a visual diagram, or a mini project using item spanning (like a layout grid or dashboard)?

Responsive design using Grid

CSS Grid is a powerful layout system that not only simplifies creating structured designs but also makes responsive design easy and flexible without relying heavily on media queries. It enables dynamic rearrangement of layout components based on screen size, orientation, or container dimensions.

Why Use Grid for Responsive Design?

Adapts to any screen size (mobile, tablet, desktop)
Reduces the need for complex float or flex hacks
Supports auto-fitting, auto-filling, and media queries
Allows easy control over item spanning, order, and alignment

Basic Responsive Grid Example

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

This layout will:

Automatically adjust the number of columns
Use minimum 200px per column
Fill remaining space (1fr) as needed

<div class=”container”>
<div class=”item”>1</div>
<div class=”item”>2</div>
<div class=”item”>3</div>
<div class=”item”>4</div>
</div>

On wide screens, items appear in multiple columns
On smaller screens, the items stack automatically

auto-fit vs auto-fill

auto-fit: Collapses empty tracks when no content exists
auto-fill: Maintains grid structure even if some columns are empty

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Media Query Example (More Control)

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

@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(4, 1fr);
}
}

This allows:

1 column on mobile
2 columns on tablets
4 columns on desktops

Responsive Grid Areas

You can also create named areas and redefine them in media queries:

.container {
display: grid;
grid-template-areas:
“header”
“content”
“sidebar”
“footer”;
}

@media (min-width: 768px) {
.container {
grid-template-areas:
“header header”
“sidebar content”
“footer footer”;
grid-template-columns: 1fr 3fr;
}
}

<div class=”container”>
<div class=”header”>Header</div>
<div class=”sidebar”>Sidebar</div>
<div class=”content”>Content</div>
<div class=”footer”>Footer</div>
</div>

Each child gets a grid-area: name; to match its position.