CSS Grid Layout Instant Preview

This page provides an interactive form and preview of the grid layout CSS rules.

The CSS display: grid; rule will set a contained element into grid layout mode.

CSS Reference

#container
    display: grid;
    grid-template: grid-template-areas grid-template-rows / grid-template-columns values
        grid-template-areas: "menu head"
                             "menu body";
        grid-template-rows: none (-> grid-auto-rows) | <length> | <percentage> | <flex> (fr) | max-content | min-content | minmax(min, max) | auto | fit-content( [ <length> | <percentage> ] ) | repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) | subgrid
        grid-template-columns: 
    grid-auto-rows: <length> | <percentage> | <flex> | min-content | max-content | auto | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
    grid-auto-columns:
    grid-auto-flow: [ row | column ] || dense
    grid-gap: <length> | row-gap column-gap
    row-gap: normal | <length> | <percentage>
    column-gap: normal | <length> | <percentage>
.item 
    grid-area: <grid-line> [ / <grid-line> ]{0,3}
        where <grid-line>: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]