CSS Grid Layout

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;
}