A CSS Grid Layout having rows and columns, excels at dividing the page into major regions. It is a powerful tool that allows for two-dimensional layouts to be created on the web.
The horizontal lines of grid items are called rows. The vertical lines of grid items are called columns. The spaces between each row or column is known as gap.
Below is the diagram for CSS Grid Layout.
Grid Properties:-
- display
- row-gap
- column-gap
- gap
- justify-items
- align-items
- place-items
- justify-content
- align-content
- grid-column
- grid-row
- grid-area
display:-
An HTML elements become a grid container when display property is set to grid.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
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 class="grid-item">9</div>
</div>
</body>
row-gap:-
The row-gap property sets the gaps between the rows.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
row-gap: 50px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
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 class="grid-item">9</div>
</div>
</body>
column-gap:-
The column-gap property sets the gap between the columns.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
column-gap: 50px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
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 class="grid-item">9</div>
</div>
</body>
gap:-
The gap property is a shorthand property for setting both row and column gaps respectively. It can also be set by giving one value.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
gap: 50px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
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 class="grid-item">9</div>
</div>
</body>
justify-items:-
The justify-items property is applied to all the grid items inside a container. We can use values like start, end, stretch, center.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
gap: 50px;
justify-items: start;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
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 class="grid-item">9</div>
</div>
</body>
align-items:-
The align-items property is used to align the grid-items along the column axis.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
gap: 50px;
align-items: center;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>
</div>
</body>
place-items:-
The place-items property is a is shorthand property for the align-items and justify-items properties, combining them into a single declaration.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
gap: 50px;
place-items: center;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>
</div>
</body>
justify-content:-
The justify-content property is used to align the whole grid inside the container.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
gap: 50px;
justify-content: space-around;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
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 class="grid-item">9</div>
</div>
</body>
align-content:-
The align-content property is used to vertically align the whole grid inside the container.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
gap: 50px;
align-content: space-around;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
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 class="grid-item">9</div>
</div>
</body>
grid-column:-
The grid-column property defines on which column the item is to be placed. It is a shorthand property for the grid-column-start and the grid-column-end properties. Here, in this example, grid-item1 starts from column-line 1 and ends on column-line 3.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
gap: 50px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.grid-item1{
grid-column: 1/3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>
</div>
</body>
grid-row:-
The grid-row property defines on which row the item is to be placed. Here, in this example, grid-item 1 starts from row-line 1 and ends on row-line 3.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
gap: 50px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.grid-item1{
grid-row: 1/3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>
</div>
</body>
grid-area:-
The grid-area property is a shorthand property for grid-row-start, grid-row-end, grid-column-start, grid-column-end.
Here, in this example, item 1 starts on row-line 1 and column-line 3 and ends on row-line 5 and column-line 4.
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: red;
padding: 10px;
gap: 50px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.grid-item1{
grid-area: 1/3/5/4;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>
</div>
</body>
Thank you for reading. Hope you liked this article. Please like, comment and share your valuable feedback. Happy Learning!!!