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
Role of CSS Grid Container
The CSS Grid Container is the parent element that establishes a grid formatting context for its children. When you apply display: grid to an element, it becomes a grid container, and all its direct children automatically become grid items.
Syntax
.container {
display: grid;
grid-template-columns: value;
grid-template-rows: value;
}
Key Properties
| Property | Description |
|---|---|
display: grid |
Creates a grid container |
grid-template-columns |
Defines the number and size of columns |
grid-template-rows |
Defines the number and size of rows |
grid-gap |
Sets spacing between grid items |
Example: Basic Grid Container
Let us create a CSS Grid container and set the number of columns in a grid −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: #2196F3;
grid-template-columns: auto auto;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: #FF9800;
border: 2px solid #555;
padding: 35px;
font-size: 30px;
text-align: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
A blue grid container with 6 orange numbered boxes arranged in a 2-column layout (3 rows of 2 items each), with 20px spacing between items and a "Game Board" heading above.
Conclusion
The grid container serves as the foundation for CSS Grid layouts. By setting display: grid and defining columns with grid-template-columns, you create a structured layout where child elements automatically flow into grid positions.
Updated on: 2026-03-15T12:54:11+05:30
125 Views
Advertisements