CSS Flexbox & CSS Grid Cheatsheet: Visual Layout Quick Reference
Visual syntax quick reference for modern CSS Flexbox and CSS Grid layout properties.
Flexbox Container Properties
Defines a flex container; enables a flex context for all its direct children.
display: flex;Establishes the main-axis direction (horizontal row or vertical column).
flex-direction: row | column | row-reverse;Aligns items along the main horizontal axis.
justify-content: flex-start | center | space-between | space-around | space-evenly;Aligns items along the cross vertical axis.
align-items: stretch | flex-start | center | flex-end | baseline;Controls whether flex items are forced into a single line or can wrap.
flex-wrap: nowrap | wrap | wrap-reverse;Defines gutter space between flex items.
gap: 1rem 1.5rem; /* row column */Flexbox Item Properties
Defines the ability for a flex item to grow if necessary.
flex-grow: 1;Defines the ability for a flex item to shrink if space is constrained.
flex-shrink: 0;Defines the default size of an element before remaining space is distributed.
flex-basis: 250px | auto;Allows default cross-axis alignment to be overridden for individual flex items.
align-self: flex-end;CSS Grid Container Properties
Defines the element as a grid container.
display: grid;The holy grail responsive grid without media queries.
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));Divides space into flexible fractional units.
grid-template-columns: 1fr 2fr 1fr;Sets the spacing between grid rows and columns.
gap: 1.5rem;Open CSS Minifier Tool
Minify CSS by removing comments and extra whitespace.
FAQ
Frequently Asked Questions
When should I use Flexbox vs CSS Grid?
Use Flexbox for one-dimensional layouts (a single row or column of items). Use CSS Grid for two-dimensional layouts where you need strict control over both rows and columns simultaneously.