For working professionals
For fresh graduates
Study abroad
More

CSS Grid Layout

Updated on 03/02/2025365 Views

Table of Content

Cascading Style Sheets (CSS) is a language that styles web pages. CSS Grid Layout emerges as a dynamic solution for creating website layouts with enhanced efficiency and adaptability. From conventional approaches like floats or positioning, CSS Grid empowers designers to establish rows and columns, creating a grid-like framework.

What is CSS Grid Layout?

CSS Grid Layout is a modern way to design web layouts using a grid system. It lets developers easily organize content into rows and columns, making it simple to create complex and responsive designs. With the CSS Grid system, you have more control over how elements are positioned on a webpage, making it a great tool for modern web design.

Key Concepts

Grid Item: Elements contained within the grid container are called grid items.

Grid Line: Vertical or horizontal lines forming the grid's structure.

Grid Cell: Smallest unit, space between adjacent rows and columns.

Rows: Horizontal tracks in the grid.

Columns: Vertical tracks in the grid.

Gutter: Space between rows and columns.

Grid Track: A grid track refers to a single dimension (either a column or a row) within the grid. When you create a web grid layout, you define rows and columns. Each of these rows or columns is referred to as a grid track.

Fraction: The fraction unit (fr) is used to distribute available space within the grid container. You can use fractions (fr) to distribute available space among grid tracks. For example, setting a column to 1fr and another to 3fr means the second column gets thrice the space of the first.

Grid template

A CSS Grid Template is a blueprint that outlines the structure of a grid layout. It defines the arrangement of rows and columns, determines their dimensions, and dictates the placement of elements within the grid.

Grid template columns

In CSS Grid Layout, the grid-template-columns property is used to specify the size of the columns in a grid container.

Grid Container:

In CSS Grid Layout, the Grid container is an element where the display: grid property is utilized. It serves as the immediate parent of all grid items, which are organized within rows and columns.

Let's understand the concept of the grid container through an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Container Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<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>

Output:

|  1  |  2  |  3  |
+-----+-----+-----+
|  4  |  5  |  6  |

In this example

A grid container is configured with three columns and two rows., each set to a width of 100 pixels using the grid-template-columns property
we could have used grid-template-rows to set the height of the rows if needed.
The grid-gap property sets a gap of 10 pixels between the columns and rows.

Let us generate a css grid layout which has 2 columns and 4 rows.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columns */
grid-template-rows: 100px 100px 100px 100px; /* 4 rows */
grid-gap: 10px; /* gap between grid items */
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<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 class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
</body>
</html>

This code will create a grid container with 2 columns and 4 rows, each row and column having a height and width of 100 pixels, respectively. The grid items within the container will have a gap of 10 pixels between them, and they will be styled with a gray background and centered text.

Output

|   1    |   2    |
+--------+--------+
|   3    |   4    |
+--------+--------+
|   5    |   6    |
+--------+--------+
|   7    |   8    |
+--------+--------+

Let us take another example to get more clarity on the topic and generate a css grid.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
grid-gap: 20px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<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>

Output:

+--------+--------+--------+
|   1    |   2    |   3    |
+--------+--------+--------+
|   4    |   5    |   6    |

In this example:

A grid container is configured with three columns and two rows.
The first column expands to utilize one fraction (1fr) of the available space, while the second column spans two fractions (2fr), and the third column again claims one fraction (1fr).
Row heights are defined as 100 pixels for the first row and 200 pixels for the second row.
A gap of 20 pixels exists between each grid item, contributing to the spacing within the grid layout.

Repeating Grid Tracks

In CSS Grid Layout, use the repeat () function to repeat the same grid track multiple times. The function is used when you have grid items of uniform sizes.

Let us consider an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Grid Tracks Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat (3, 1fr); /* Repeat 3 times, each track takes up equal space */
grid-gap: 10px;
justify-items: center;
align-items: center;
height: 200px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<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>

Output

+---+ +---+ +---+
| 1 | | 2 | | 3 |
+---+ +---+ +---+

+---+ +---+ +---+
| 4 | | 5 | | 6 |
+---+ +---+ +---+

In this example

Each grid track takes up equal space using the 1fr unit, and the grid items are centered both horizontally and vertically within each cell.
Also, set a fixed height for the grid container to ensure that the items are displayed properly.

Aligning Content With CSS Grid

In CSS Grid Layout, the align-content property aligns the grid along the row axis, while justify-content aligns the grid along the column axis.

Let us consider an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align-Content and Justify-Content Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
grid-gap: 10px;
justify-content: center; /* Aligns items along the column axis */
align-content: center; /* Aligns items along the row axis */
height: 300px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<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>

Output

+---+ +---+ +---+
| 1 | | 2 | | 3 |
+---+ +---+ +---+

+---+ +---+ +---+
| 4 | | 5 | | 6 |
+---+ +---+ +---+

Grid Nesting

In CSS Grid Layout, nesting grids involve placing grid containers within other grid items.

Let us understand the concept through an example.<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nesting Grids Example</title>
<style>
.outer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.inner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="outer-grid">
<div class="grid-item">Outer Grid Item 1</div>
<div class="grid-item">Outer Grid Item 2</div>
<div class="grid-item inner-grid">
<div class="grid-item">Inner Grid Item 1</div>
<div class="grid-item">Inner Grid Item 2</div>
</div>
</div>
</body>
</html>

Output

Outer Grid Item 1                                   Outer Grid Item 2

Inner Grid Item 1                     Inner Grid Item 2

In this example, we've set up an outer grid featuring two columns. Within the second column of this outer grid resides another grid, referred to as the inner grid, also comprising two columns. This setup showcases grid nesting, where a grid container (inner-grid) resides within a grid item of the outer grid.

Conclusion

CSS Grid Layout is a game-changer for web design. It lets designers easily arrange content in rows and columns, making websites look great on any device. With CSS Grid, you have precise control over layout and alignment, making it easy to create awesome and responsive web pages.

CSS grid layout examples

Question 1: Create a grid layout with four columns and three rows, where each column has a width of 150 pixels and each row has a height of 100 pixels. Include a gap of 20 pixels between grid items.

.grid-container {
display: grid;
grid-template-columns: repeat(4, 150px);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px;
}

Question 2: Implement a grid layout with two columns and five rows, where the first column takes up 30% of the available space, and the second column takes the remaining space. Each row should have a height of 50 pixels, and there should be a gap of 10 pixels between grid items.

.grid-container {
display: grid;
grid-template-columns: 30% 1fr;
grid-template-rows: repeat(5, 50px);
grid-gap: 10px;
}

FAQs

Q. What is the grid layout in CSS?

CSS Grid Layout revolutionizes web design by offering a powerful system to construct layouts with precise control over element positioning within rows and columns and helps us organize things on a webpage neatly.

Q. How to use a 12 column grid in CSS?

To use a 12 column grid in CSS, you can define the grid structure by setting up twelve equal-width columns. Here's an example:

.container {
display: grid;
grid-template-columns: repeat(12, 1fr); /* Creates 12 columns of equal width */
grid-gap: 10px; /* Adds a gap between columns */
}
.column {
/* Style individual columns as needed */
}

In this example, the .container class represents the grid container, and .column represents the grid items within the container.

Q. How to create grid pattern CSS?

A. To construct a grid pattern in CSS, you can use the grid-template-columns and grid-template-rows properties to define the number and size of columns and rows in the grid.

Q. How to apply CSS on a grid?

A. CSS can be applied to a grid by targeting the grid container and items using CSS selectors. You can style the grid container using properties like display: grid and grid-template-columns and apply styles to grid items using classes or IDs.

Q. What is the use of a layout grid?

A layout grid is used to organize content on a webpage in a systematic way. It helps maintain consistency in design, making it easier to create visually appealing layouts.

Q. Does CSS have a grid?

A. Yes, CSS has a grid system called CSS Grid Layout. It allows developers to create complex layouts with rows and columns.

Q. Is CSS Grid flexible?

A. Yes, the CSS Grid Layout is highly flexible. It allows developers to build responsive layouts that adapt to varying screen sizes and devices. With features like auto-sizing columns and rows, grid gaps, and alignment properties, CSS Grid offers great flexibility in designing layouts.

Q. How to change grid color in CSS?

A. You can change the color of the grid lines or grid items in CSS by applying the border property to grid items or using the background-color property for the grid container. Additionally, you can use CSS pseudo-elements like ::before and ::after to create decorative grid lines.