Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Grid Layout
CSS Grid Layout is a two-dimensional layout system that allows you to arrange content in rows and columns. It provides a powerful way to create complex layouts with explicit control over positioning and sizing of elements. Grid Layout is perfect for creating responsive designs and offers more control than traditional layout methods.
Syntax
.container {
display: grid;
}
Basic Grid Layout
The following example demonstrates how to create a basic grid layout with two columns −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
background-color: #f0f0f0;
padding: 20px;
gap: 10px;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
A 2x2 grid with four green boxes containing "Item 1", "Item 2", "Item 3", and "Item 4" displayed in two columns.
Column Gap Property
The column-gap property sets the gap between grid columns −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 30px;
background-color: #e8e8e8;
padding: 20px;
}
.grid-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Column 1</div>
<div class="grid-item">Column 2</div>
<div class="grid-item">Column 3</div>
<div class="grid-item">Column 4</div>
</div>
</body>
</html>
A 2x2 grid with blue boxes and a 30px gap between columns, creating clear separation between the left and right columns.
Row Gap Property
The row-gap property sets the gap between grid rows −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
row-gap: 25px;
background-color: #f5f5f5;
padding: 20px;
}
.grid-item {
background-color: #FF5722;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Row 1 Col 1</div>
<div class="grid-item">Row 1 Col 2</div>
<div class="grid-item">Row 2 Col 1</div>
<div class="grid-item">Row 2 Col 2</div>
</div>
</body>
</html>
A 2x2 grid with orange boxes and a 25px gap between rows, creating clear separation between the top and bottom rows.
Conclusion
CSS Grid Layout provides powerful tools for creating two-dimensional layouts. The display: grid property establishes a grid container, while column-gap and row-gap properties control spacing between grid items for clean, organized layouts.
714 Views
