How To Use Grid-Row-Align And Grid-Column-Align?
Last Updated :
13 Aug, 2024
The grid-row-align and grid-column-align properties don't exist in CSS. Instead, CSS Grid uses properties like "align-items" and "justify-items" for controlling alignment across rows and columns, allowing precise positioning of grid items within their cells. so we will go to see how can we align the grid items.
These are the following ways:
Aligning All Grid Items Along the Row Axis (Align-Items)
The align-items property aligns all grid items within the rows of the grid container. We can align the items to the start, center, or end of the row, or stretch them to fill the entire row.
Syntax:
.grid-container {
display: grid;
align-items: value;
/* start | center | end | stretch */
}Example: In the example below we demonstrate a simple grid layout using CSS Grid, where the grid items are aligned vertically in the center of their respective rows.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Align Items along Row Axis</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
align-items: center;
/* Align items to the center of the row */
gap: 10px;
}
.grid-item {
background-color: lightblue;
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:
Align-Items OutputAligning a Specific Grid Item Along the Row Axis (Align-Self)
The align-self property allows you to align a specific grid item within its row. This gives us more control over individual grid items.
Syntax:
.grid-item {
align-self: value;
/* start | center | end | stretch */
}Example: In the example below we demonstrate the use of CSS grid and the 'align-self' property to control the vertical alignment of a specific grid item within its grid container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Align Self Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
.item-4 {
align-self: end;
/* Align this item to the end of its row */
}
</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 item-4">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
Output:
(align-self)Aligning All Grid Items Along the Column Axis (Justify-Items)
The justify-items property aligns all grid items within the columns of the grid container.
Syntax:
.grid-container {
display: grid;
justify-items: value;
/* start | center | end | stretch */
}Example: In the below example we are demonstrating a grid layout using CSS Grid, where the grid items are horizontally alogned to the end of their respective columns. The 'justify-items: end;' property helps in achieving this horizontal alignment.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Justify Items Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
justify-items: end;
/* Align all items to the end of the columns */
gap: 10px;
}
.grid-item {
background-color: lightcoral;
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:
Justify-Items OutputConclusion
Using grid-row-align and grid-column-align, we can decide how grid items are positioned within their grid container. Understanding of how to control the alignment of grid items along both rows and columns is important for creating well-organized designs. The properties grid-row-align and grid-column-align are powerful tools that give you good control over the placement of items within a grid container.
Similar Reads
How to make a grid without calling CSS Grid property ?
In this article, we will see how to make a grid without calling CSS Grid property, along with understanding its implementation through the examples. It is essential to understand how CSS grid property works but what if we do not use the CSS grid property to make a grid. This is the generic question
4 min read
How to Align Columns in Nested HTML using CSS Grid?
We can easily Align columns in nested HTML structures using a CSS grid. There are different approaches to do this such as Simple Nested Grid Alignment, Aligning Nested Grids with Specific Columns, and Responsive Nested Grids. Each approach serves different design needs, from basic grid layouts to mo
4 min read
How to align columns in a row on text end using Bootstrap 5 ?
In this article, we will see how to align columns in a row on the text end using Bootstrap5. Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hove
2 min read
How to Create a 4-Column Layout Grid with CSS?
We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a c
3 min read
How to Align Last Row to Grid in Flexbox ?
Flexbox is a very useful layout module of CSS (Cascading Style Sheets). It is very easy to create flexible and responsive layouts using Flexbox. But it doesn’t always give the expected alignment, especially on the last row of a grid. Flexbox will distribute the items evenly across the last row, whic
2 min read
How to Create a 3-Column Layout Grid with CSS?
Grid in CSS is a powerful layout system that allows you to create complex, responsive designs with ease. By defining rows and columns, you can position elements precisely within a grid container. Using grid properties like grid-template-columns, you can create flexible and adaptive layouts, such as
3 min read
How to Create a 2-Column Layout Grid with CSS?
Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or
4 min read
How to Get a Table Like Row/Column Alignment in a Flexbox ?
Getting a table-like row/column alignment in Flexbox refers to structuring content similarly to traditional tables, but with more flexibility. Flexbox allows items to align in rows and columns dynamically, offering responsive control over spacing, alignment, and positioning, ideal for modern layouts
3 min read
How to align item baseline of the container ?
In this article, we will learn how to align items to the baseline of the container. There are three types of alignments in CSS, baseline alignment, positional alignment, and distributed alignment. The Baseline alignment is used to align the baselines of boxes across a group of alignment subjects. Th
3 min read
Difference between align-content and align-items
Both align-content and align-items function on the cross-axis.Cross-axis in flexbox is dependent on the flex-direction and runs perpendicular to the main-axis, if flex-direction is either row or row-reverse then the cross-axis is vertical, if flex-direction is either column or column-reverse then th
4 min read