Layout Playground

CSS Grid Explorer

Grid lets you define columns and rows at the container level. Items snap into those tracks automatically. Float and flexbox both require manual width math when items need to span columns. Grid doesn't.

Pick a column template, adjust the gap, and click any item to control how many columns it spans. The CSS output updates as you go.

grid-template-columns

gap

16px

Applies to both row-gap and column-gap. 0 is no space. 40px is a lot.

align-items

Vertical alignment of items inside their row track.

justify-items

Horizontal alignment of items inside their column track.

grid-auto-rows

Height of implicitly created rows. auto lets content decide.

grid-auto-flow

How the browser places items that aren't explicitly positioned.

Live Preview Click an item to select it, then change its span

Item 1 spans 1 column

Copy and use this

Spanning columns means manual width math per item. Change the column count and every width has to be recalculated.

              .container { overflow: hidden } /* clearfix */
              .item     { float:
                left; width: 30%; margin: 0
                  1.5% 6px }
              .item.wide { width: 63% } /* manual: 2×30% + 3×1.5% gap */
            

Flexbox is 1D. Making an item span multiple columns means forcing flex-basis — the columns still drift if the container resizes.

              .container { display: flex; flex-wrap: wrap; gap: 6px }
              .item     { flex:
                1 1 28% }
              .item.wide { flex-basis: 62% } /* not a real span */
            

grid-column: span 2 snaps to the defined tracks. Change the column count in one place — all spans adjust. No math.

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px } .item.wide { grid-column: span 2 } /* that's it */

grid Browser Support

Widely available Since 2017 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

57+

52+

10.1+

16+

grid Browser Support

References

Naming grid areas without line numbers

New CSS drops.