Grid Container in CSS
? CSS Grid Container
A Grid Container is any HTML element where you enable CSS Grid layout by setting display: grid or display: inline-grid. This container then defines a grid system to place and align its child elements (grid items) in rows and columns.
How to Create a Grid Container
.container { display: grid; /* or inline-grid */}Key Properties for Grid Container
| Property | Description | Example Values |
|---|---|---|
grid-template-columns | Defines the number and size of columns | 100px 200px 100px, repeat(3, 1fr), auto |
grid-template-rows | Defines the number and size of rows | 50px 100px, repeat(2, 200px) |
grid-column-gap / column-gap | Space (gap) between columns | 10px, 1em |
grid-row-gap / row-gap | Space (gap) between rows | 15px |
gap | Shorthand for setting both row and column gaps | 20px 10px (row-gap 20px, column-gap 10px) |
grid-auto-rows | Size of rows created implicitly (beyond defined rows) | 100px, minmax(100px, auto) |
grid-auto-columns | Size of columns created implicitly | 150px |
grid-auto-flow | Controls how auto-placed items are inserted (row, column, dense) | row, column, row dense |
justify-items | Align items horizontally inside their grid area | start, end, center, stretch |
align-items | Align items vertically inside their grid area | start, end, center, stretch |
justify-content | Align the entire grid horizontally within the container | start, end, center, space-between |
align-content | Align the entire grid vertically within the container | start, end, center, space-around |
Example: Simple 3-column Grid Container
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; /* sets both row and column gaps */}<div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div></div>This will create 3 equal-width columns.
Items automatically flow into rows.
Notes
Grid containers establish a new grid formatting context for their children.
Grid layout is two-dimensional: you control rows and columns simultaneously.
Use
frunits to distribute available space proportionally.Use
autoto size columns/rows based on content.
If you want, I can help you create a custom grid layout or explain grid item placement!
