Design6 min read

CSS Grid & Flexbox

Master CSS Grid and Flexbox - the two layout systems that together solve every modern web layout challenge from nav bars to complex dashboard grids.

CSS GridFlexboxCSS LayoutResponsive DesignFrontend

skill: CSS Grid & Flexbox category: Design tags: [CSS Grid, Flexbox, CSS Layout, Responsive Design, Frontend] readingTime: 6

Flexbox and Grid are complementary, not competing. Use Flexbox for one-dimensional layout (a row of buttons, a nav bar, a flex column). Use Grid for two-dimensional layout (a page grid, a card gallery, a dashboard). Most UIs need both. Float-based layouts are obsolete - never use them for new work.

Workflow

Use Flexbox for one-dimensional layoutFlexbox distributes space along a single axis - perfect for navigation bars, button groups, card rows, and any layout where items flow in one direction.
Use CSS Grid for two-dimensional layoutsGrid places items on a two-dimensional canvas - rows AND columns simultaneously. Essential for page layouts, card grids, and dashboards.
Build responsive layouts without media queriesauto-fit and minmax create responsive grids that adjust the number of columns automatically - often eliminating media queries entirely.
Center content perfectlyCentering is the most Googled CSS question. Grid and Flexbox each have a one-liner solution that replaces the ancient transform trick.
Layer elements with Grid placementGrid allows multiple items to occupy the same cells - enabling card overlays, image captions, and hero sections without absolute positioning.

Output Format

CSS layout patterns: Flexbox for 1D, Grid for 2D, auto-fit/minmax for responsive, place-items for centering.

Decision guide:
  Row of buttons / nav    → Flexbox row
  Card grid / page layout → Grid
  Center one element      → display:grid; place-items:center
  Sidebar + main          → Grid template-areas
  Equal-height cards      → Flexbox column + flex:1 on content
  Responsive without MQ   → grid repeat(auto-fit, minmax(...))

Examples

Input

Output

Edge Cases & Gotchas

Implicit grid rows creating layout bugs - Grid items placed beyond the explicit grid create implicit rows. Set grid-auto-rows: 0 or grid-auto-rows: min-content to prevent unexpected height.
Flexbox basis vs. width - flex-basis overrides width in flex layout. When both are set, flex-basis wins. In Grid, width is ignored inside grid items - use grid's sizing instead.
Gap in older browsers - gap in Flexbox requires Chrome 84+, Firefox 63+, Safari 14.1+. For older support, use margin on children and negative margin on the parent, or check your target browsers.
Overflow scrolling inside Grid - Grid items default to min-width: auto - a long word or pre element can overflow the grid. Set min-width: 0 on grid items to allow scrolling.

When to Break These Rules

Use absolute/fixed positioning for UI elements that float above the normal document flow (tooltips, dropdowns, modals, toasts) - these escape the layout context intentionally.
Use multi-column layout (column-count) for masonry-style text flow (newspaper columns, Pinterest-like text layouts) - Grid doesn't handle variable-height masonry well without JavaScript.

Reference Files

https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/