CSS Grid is a CSS layout system for arranging elements in two dimensions: across rows and columns. Unlike the browser’s default stacked layout, it can place related parts of a page side by side. section 12.2.8
A practical layout uses a wider article column beside a narrower sidebar. Set the parent element to a grid, then define the column proportions with grid-template-columns. section 12.2.8
Article and sidebar
For a main element containing article and aside elements, use `display: grid;` and `grid-template-columns: 2fr 1fr;`. The article receives two parts of the available width, while the aside receives one. Change the value to `3fr 1fr` when the article needs more space. section 12.2.8
CSS Grid also supports responsive pages. A media query can change the header and main layout to one column on a smartphone, while reducing the logo and text sizes. section 12.2.10
main {
display: grid; #1
grid-template-columns: 2fr 1fr; #2
}
Use this compact CSS fragment to see the two-column grid declaration directly. section 12.2.8
When generating a page with an assistant, specify that the layout should use CSS Grid, identify the desired columns, and state how the design should adapt to smaller screens. Check and customize the generated HTML and CSS afterward. section 12.2.10 section 12.6
