How do you create equal-width columns using Grid?

Q: How do you create equal-width columns using 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. Use `display: grid;` to activate Grid layout. Define columns with `grid-template-columns: repeat(n, 1fr);` where `n` is the number of columns. The `1fr` unit makes each column take an equal share of the available width. You can use the `gap` property to add spacing between columns. .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .item { background-color: #4caf50; color: white; padding: 20px; text-align: center; font-weight: bold; } Column 1 Column 2 Column 3

Difficulty: 5/10

grid-template-columns, fr units, responsive layout

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

1
Use display: grid; to activate Grid layout.
2
Define columns with grid-template-columns: repeat(n, 1fr); where n is the number of columns.
3
The 1fr unit makes each column take an equal share of the available width.
4

Example: Three Equal-Width Columns

Scenario Questions

0-2 years experience

Follow-up Questions