How do you create equal-width columns using Grid?
Creating Equal-Width Columns with CSS Grid
In CSS Grid, you can create equal-width columns using the grid-template-columns property with the repeat() function and the fractional unit (fr). The fr unit distributes available space evenly among columns.
Key Points
Use
display: grid;to activate Grid layout.Define columns with
grid-template-columns: repeat(n, 1fr);wherenis the number of columns.The
1frunit makes each column take an equal share of the available width.You can use the
gapproperty to add spacing between columns.
Example: Three Equal-Width Columns