XQA
Back to Web Development
2026-03-086 min read

Grid Tracks (Web Development)

Learn Grid Tracks (Web Development) step by step with clear examples and exercises.

Why This Matters

Understanding Grid Tracks is Key to Modern Web Design

Grid tracks are a crucial aspect of CSS Grid Layout, which has revolutionized the way we design and develop responsive websites. By allowing you to divide a web page into rows and columns, grid tracks enable precise alignment and positioning of elements, leading to visually appealing and flexible designs. Mastering grid tracks is essential for any front-end developer who wants to stay current with modern web development practices.

Prerequisites

Essential Knowledge Before Diving into Grid Tracks

Before delving into grid tracks, it's important to have a solid understanding of HTML and CSS basics. You should be comfortable creating web pages using HTML tags, styling elements with CSS properties like width, height, margin, and padding, and positioning elements using the position property. Familiarity with flexbox is also beneficial but not required.

Core Concept

Grid Tracks in CSS Grid Layout

Grid tracks are part of a two-dimensional grid system used for designing web pages. A grid consists of rows and columns, each cell containing one or more elements. You can control the size and position of these cells using grid tracks. To create a grid, you first define the number of rows and columns using grid-template-rows and grid-template-columns, respectively. Each row and column is then divided into one or more tracks, which can have fixed sizes or be sized based on content.

Here's an example of a simple grid with two rows and three columns:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.grid {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.grid-item {
background-color: #f5f5dc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>

In this example, the display: grid; property turns an element into a grid container. The grid-template-rows and grid-template-columns properties define the number of rows and columns, respectively. Each row and column is divided into one track with a size of 1fr, meaning each track will take up an equal share of available space. The gap property adds space between grid cells.

You can also create tracks with fixed sizes by specifying pixel values instead of fr. For example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.grid {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 150px auto;
gap: 10px;
}

.grid-item {
background-color: #f5f5dc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
</body>
</html>

In this example, the first row has a height of 100px, and the second row has a height of 200px. The first column has a width of 150px, while the second column will take up any remaining space.

Worked Example

Building a Portfolio Website with Grid Tracks

Let's create a simple portfolio website using grid tracks:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.portfolio {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-gap: 20px;
}

.portfolio-item {
background-color: #f5f5dc;
padding: 20px;
text-align: center;
}

.portfolio-image {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="portfolio">
<div class="portfolio-item">
<img src="project1.jpg" alt="Project 1" class="portfolio-image">
<h2>Project 1</h2>
<p>Description of Project 1...</p>
</div>
<div class="portfolio-item">
<img src="project2.jpg" alt="Project 2" class="portfolio-image">
<h2>Project 2</h2>
<p>Description of Project 2...</p>
</div>
<!-- Add more portfolio items as needed -->
</div>
</body>
</html>

In this example, the .portfolio class creates a grid with three rows. Each row contains one portfolio item, which consists of an image and some text. The .portfolio-image class ensures images are sized correctly.

Common Mistakes

  1. Forgetting to set display: grid; on the container element: This prevents the grid from being created.
  2. Not specifying enough rows and columns: Insufficient tracks may result in a grid that doesn't have enough space for all elements.
  3. Using pixel values instead of fr units: Fixed sizes can make layouts less responsive, as they are fixed regardless of the viewport size.
  4. Not closing grid-template-rows and grid-template-columns with a semicolon: Forgetting to add a semicolon at the end of these properties can cause syntax errors.
  5. Not using the gap property: The gap property helps create visually appealing grids by adding space between cells.
  6. ### Subheadings under Common Mistakes:
  • Not specifying grid tracks explicitly: If you don't define grid tracks, browsers will automatically assign them based on content, which may not always produce the desired layout.
  • Using inconsistent units: Mixing fr and pixel values can lead to unpredictable results and make it harder to create responsive designs.

Practice Questions

  1. Create a grid with three rows and four columns, each containing an image and some text. Use fr units to size the tracks.
  2. Modify the previous example to add a header row that spans all four columns.
  3. Create a responsive grid layout that adjusts its number of columns based on the width of the viewport.
  4. Style your portfolio website to make it more visually appealing, using CSS properties such as border-radius, box-shadow, and transition.
  5. ### Subheadings under Practice Questions:
  • Adding a header row: To add a header row, you can create an additional track with the desired height in the first row of your grid template.
  • Creating a responsive layout: You can use media queries to adjust the number of columns based on viewport size. For example, you could set four columns for larger screens and two columns for smaller screens.

FAQ

  1. What is the difference between a grid container and a grid item? A grid container is an HTML element that has been given the display: grid; property, which turns it into a grid container. Grid items are the elements contained within the grid container.
  2. How do I center an element within a grid cell? You can use the align-items and justify-content properties to align and center elements within a grid cell. For example, align-items: center; justify-content: center; will center both vertical and horizontal alignment of an element.
  3. How do I create nested grids? You can create nested grids by nesting one grid container within another. The child grid container will be created within its parent's grid cell, and you can use grid-row and grid-column properties to position it.
  4. Can I use grid tracks with flexbox or floats? Yes, you can use grid tracks alongside other layout methods such as flexbox or floats. However, using multiple layout methods can make your code more complex and harder to maintain. It's generally best to stick to one method for a given section of your web page.
  5. ### Subheadings under FAQ:
  • Grid container vs grid item: Understanding the difference between a grid container and a grid item is crucial for working effectively with CSS Grid Layout. A grid container is the HTML element that has been turned into a grid, while grid items are the elements contained within it.
  • Centering elements in grid cells: To center an element within a grid cell, you can use the align-items and justify-content properties. These properties allow you to control vertical and horizontal alignment, respectively.
  • Nested grids: Nested grids are created by placing one grid container within another. This allows for complex layouts with multiple levels of organization.
  • Using grid tracks with other layout methods: While it's possible to use grid tracks alongside other layout methods like flexbox or floats, it's generally recommended to stick to one method for a given section of your web page to keep your code clean and maintainable.
Grid Tracks (Web Development) | Web Development | XQA Learn