CSS Grid Generator
Create powerful grid layouts for modern websites
Grid Layout Generator
/* Generated CSS will appear here */Grid Preview
CSS Grid Basics
CSS Grid Layout is a two-dimensional layout system designed for organizing content in rows and columns.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 20px;
}
Key Concepts:
- Grid Container: The element with
display: grid - Grid Items: Direct children of the grid container
- Grid Lines: The dividing lines that make up the grid
- Grid Tracks: The rows and columns of the grid
- Grid Cell: The space between four grid lines
Grid Units
| Unit | Description |
|---|---|
fr |
Fraction of available space |
auto |
Size based on content |
% |
Percentage of parent |
px |
Fixed pixel values |
min-content |
Minimum content size |
max-content |
Maximum content size |
Pro Tip: The fr unit is best for responsive layouts as it adapts to available space.