The Grid Layout Module offers a grid-based layout system, with rows and columns.
The Grid Layout Module allows developers to easily create complex web layouts.
The Grid Layout Module makes it easier to design a responsive layout structure, without using float or positioning.
The CSS grid properties are supported in all modern browsers.
The CSS Grid Layout should be used for two-dimensional layout, with rows AND columns.
The CSS Flexbox Layout should be used for one-dimensional layout, with rows OR columns.
A grid always consists of:
The Grid Container <div> element has the display: flex; property applied to it.
The Grid Items are those elements directly contained by the Grid Container <div< element.
The grid property is a shorthand property for:
The grid-template property is a shorthand property for the following properties:
The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:
The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:
The grid-row property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:
The spaces between each column/row in the grid, are called gaps.
You can adjust the gap size by using one of the following properties:
Let's look at a sample of how the CSS Grid might be used.
The page, GridSample.html, can be seen here.
You can look at the page's HTML source code by right-clicking the page in your browser, and selecting "View page source".
Then you can look at the stylesheet by clicking the stylesheet's URL in the source code.