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 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 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 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 Center a Div Using CSS Grid? To center a <div> using CSS Grid, you can use a combination of grid container properties to place the <div> at the center of its parent container. The easiest way to achieve this is by setting the parent element to use display: grid and then using properties like place-items or a combina
3 min read