The CSS grid-template-columns property sets how many columns a grid has and how wide each column should be. In a two-column layout, values such as 2fr 1fr divide available space into three portions: two for the first column and one for the second. section 12.2.8
Give the article more room than the aside
Set the main element as a grid, then use 2fr 1fr to make the article column twice as wide as the aside column. Change the value to 3fr 1fr when the article needs three portions of space. section 12.2.8
main {
display: grid; #1
grid-template-columns: 2fr 1fr; #2
}
Use this listing to check the complete two-column declaration, including display: grid and grid-template-columns. section 12.2.8
Customize the column relationship by:
- Switching from 2fr 1fr to 1fr 2fr when the aside belongs on the left, after moving the aside before the article in the HTML. section 12.5
- Remembering that CSS Grid responds to window-size changes but may need additional work for all screen sizes. section 12.2.8
