Layout Presets
Grid Container
Grid Item
Click on an item in the preview to edit its properties
Live Preview
1
2
3
4
5
6
Click on items to edit their grid positioning and alignment
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 16px;
}Tailwind CSS
<div class="grid grid-cols-3 [grid-template-rows:repeat(3, 100px)] gap-4"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
CSS Grid Guide
Grid Templates
- •
1fr- Fraction of available space - •
auto- Content-based sizing - •
100px- Fixed size - •
repeat(3, 1fr)- Repeat pattern - •
minmax(200px, 1fr)- Min/max constraints
Item Positioning
- •
span 2- Span across 2 tracks - •
1 / 3- From line 1 to 3 - •
1 / -1- From start to end - •
auto- Auto placement - • Named lines for semantic grids
Responsive Features
- •
auto-fit- Fit available space - •
auto-fill- Fill with empty tracks - •
minmax()- Responsive sizing - • Media queries for breakpoints
- • Container queries (modern browsers)
Common Patterns
- • Cards:
repeat(auto-fit, minmax(250px, 1fr)) - • Sidebar:
250px 1fr - • Holy Grail:
auto 1fr auto / 200px 1fr 200px - • Masonry: Use
grid-template-rows: masonry - • Dashboard:
repeat(4, 1fr)