Grid layout

CSS Grid Layout enables more layout fluidity than is possible with positioning using floats or scripts. You're able to divide space for major regions of a webpage or web application, and define relationships between the parts of an HTML control in terms of size, position, and layer. By using the Grid in conjunction with media queries, you can create a layout that can seamlessly adapt to changes in device form factor, orientation, available space, and more.

The example below uses CSS Grid Layout to create the structure for a basic web page.

CSS Grid Layout properties supported in Microsoft Edge

Property Description
grid A shorthand property that sets grid-template-areas, grid-template-columns, grid-template-rows, grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-column-gap, and grid-row-gap in a single declaration.
grid-area A shorthand property for grid-row-start, grid-row-end, grid-column-start, and grid-column-end that specifies the edges of a grid item's grid area.
grid-auto-columns Specifies the size of an implicitly-created grid column track.
grid-auto-flow Specifies how auto-placed itmes get flowed into the grid.
grid-auto-rows Specifies the size of an implicitly-created grid row track.
grid-column A shorthand property for grid-column-start and grid-column-end that specifies the inline-start and inline-end of a grid item's grid area.
grid-column-end Specifies the block-end edge of a grid item's grid area.
grid-column-gap Specifies the gutters between grid columns.
grid-column-start Specifies the block-start edge of a grid item's grid area.
grid-gap A shorthand property for grid-column-gap and grid-row-gap that specifies the gutters between columns and rows.
grid-row-end Specifies the inline-end edge of a grid item's grid area.
grid-row-gap pecifies the gutters between grid rows.
grid-row-start Specifies the inline-start edge of a grid item's grid area.
grid-row A shorthand property for grid-row-start](https://developer.mozilla.org/docs/Web/CSS/grid-row-start) and grid-row-end that specifies the inline-start and inline-end of a grid item's grid area.
grid-template A shorthand property for grid-template-areas, grid-template-columns, and grid-template-rows that defines grid columns, rows, and areas.
grid-template-areas Specifies named grid areas.
grid-template-columns Defines the line names and track sizing functions of grid columns.
grid-template-rows Defines the line names and track sizing functions of the grid rows.

Specification

CSS Grid Layout