CSS Flexbox & Grid Sheet
CSS Flexbox and Grid layout properties, values, and common layout patterns.
2 PagesBeginnerMay 2, 2026
Flexbox Container
Properties set on the flex parent.
css
.container { display: flex; flex-direction: row; /* row | column */ justify-content: center; /* main axis */ align-items: center; /* cross axis */ gap: 1rem; flex-wrap: wrap;}
Flexbox Item
Properties set on flex children.
css
.item { flex: 1 1 auto; /* grow shrink basis */ align-self: flex-start; order: 2;}
Grid Container
Define a grid layout.
css
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 1rem;}
Grid Item Placement
Position items within the grid.
css
.item { grid-column: 1 / 3; /* span columns 1-2 */ grid-row: 2 / 4; /* span rows 2-3 */}
Pro Tip
Use Flexbox for one-dimensional layouts (a row or a column) and Grid for two-dimensional layouts.
Was this cheat sheet helpful?
Explore Topics
#CSSFlexboxGridSheet#WebDevelopment#Beginner#FlexboxContainer#FlexboxItem#GridContainer#GridItemPlacement#CheatSheet#SkillVeris#QuickReference
Advertisement
Sri Hayavadhana Info-Tech
Professional Web Designing Services
- Responsive Websites
- E-commerce Solutions
- SEO Friendly Design
- Fast & Secure
- Support & Maintenance
