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
Selected Reading
CSS Grid Columns
The CSS Grid Layout provides a powerful way to create web layouts using rows and columns. In CSS Grid, grid columns are the vertical tracks that divide the grid container into sections where grid items can be positioned.
Syntax
.grid-container {
display: grid;
grid-template-columns: value1 value2 value3...;
}
Possible Values
| Value | Description |
|---|---|
px, em, rem |
Fixed length values |
% |
Percentage of the container width |
fr |
Fraction units for flexible sizing |
auto |
Size based on content |
repeat() |
Repeat pattern for multiple columns |
Example: Fixed Width Columns
The following example creates three columns with fixed widths −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 200px 150px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</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>
</body>
</html>
Three green boxes arranged horizontally with widths of 100px, 200px, and 150px respectively, with 10px gaps between them.
Example: Flexible Columns with fr Units
The following example uses fractional units for responsive columns −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 15px;
background-color: #f0f0f0;
padding: 10px;
}
.grid-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1 fr</div>
<div class="grid-item">2 fr</div>
<div class="grid-item">1 fr</div>
</div>
</body>
</html>
Three blue boxes where the middle box is twice as wide as the outer boxes, creating a flexible layout that adapts to container width.
Example: Using repeat() Function
The following example creates four equal columns using the repeat() function −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.grid-item {
background-color: #FF5722;
color: white;
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>
</body>
</html>
Four equal-width orange boxes arranged in a single row, each taking up 25% of the container width with 10px gaps.
Conclusion
CSS Grid columns provide flexible layout control using the grid-template-columns property. You can use fixed values, fractional units, or the repeat() function to create responsive column layouts that adapt to different screen sizes.
Updated on: 2026-03-15T13:11:23+05:30
246 Views
Advertisements