CSS Grid is a CSS layout system for arranging page content on an invisible grid of rows and columns. It gives a parent element control over its child elements horizontally and vertically, rather than leaving blocks stacked in the browser’s usual top-to-bottom flow. section 11.2 section 13.1
Think of Grid as graph paper behind a page: the lines are invisible, but they give each item a place to go. That makes Grid a strong choice for a page’s overall layout, while Flexbox handles smaller one-direction arrangements inside it. section 11.2 section 13.1
A Grid layout has two main players:
- A grid container is the parent element that holds the layout. It can be a div, a semantic HTML element, or even body. section 13.1
- Grid items are the container’s child elements. Once their parent becomes a grid container, they become grid items automatically—no ceremonial extra code required. section 13.2
Start by applying display: grid to a block-level element. The children then belong to a one-column grid, which may look suspiciously like the default stacked layout until you define rows or columns. section 13.2
body {
display: grid;
}
This smallest possible rule turns the body into a grid container. Its direct child elements automatically become grid items. section 13.2
Center a page content column
Use Grid on body to make three columns: equal leftover space on the left and right, plus a middle column sized to its content. Put the content wrapper in column 2. The wrapper can then use Flexbox for its own vertical stack—Grid and Flexbox are teammates, not rivals. section 20.5 section 11.2
body {
display: grid; #1
grid-template-columns: 1fr auto 1fr; #1
min-height: 100vh;
margin-top: 1rem;
font-family: "Open Sans", Verdana, sans-serif; > #2
background-color: #cdc9c1; > #2
background-image: radial-gradient(circle farthest-side at
center top, hsl(0, 0%, 100%) 0%, #cdc9c1 100%);> #2
color: #362507; #2
}
.container {
grid-column: 2; #1
display: flex; #2
flex-direction: column; #3
justify-content: flex-start; #2
max-width: 60rem; #4
}
The CSS shows the three-column body grid and places .container in the middle column; that nested container uses Flexbox for its internal layout. section 20.5
Grid is standards-friendly and works in current and recent major browsers without a layout library. It is meant for escaping default document flow when a page needs deliberate two-dimensional placement. section 13.0 section 11.2
