What does the grid-template-columns property do?

Q: What does the grid-template-columns property do?

The `grid-template-columns` property in CSS Grid defines the number, size, and width of the columns in a grid container. It sets up the vertical tracks along which grid items are placed. Defines the number of columns in the grid. Specifies the width of each column using lengths (`px`, `em`), percentages (`%`), fractions (`fr`), or `auto`. Supports the `repeat()` function for repeating columns with the same size. Works in combination with `grid-template-rows` to define the full grid structure. Example: `grid-template-columns: 1fr 2fr 1fr;` creates three columns with the middle column twice as wide as the others. .container { display: grid; grid-template-columns: 100px 200px 100px; gap: 10px; border: 2px solid #ccc; padding: 10px; } .item { background-color: #3498db; color: white; display: flex; justify-content: center; align-items: center; font-weight: bold; } Column 1 Column 2 Column 3

Difficulty: 4/10

responsive layout, grid syntax, fallback strategies

Understanding grid-template-columns in CSS Grid

The grid-template-columns property in CSS Grid defines the number, size, and width of the columns in a grid container. It sets up the vertical tracks along which grid items are placed.

Key Points

1
Defines the number of columns in the grid.
2
Specifies the width of each column using lengths (px, em), percentages (%), fractions (fr), or auto.
3
Supports the repeat() function for repeating columns with the same size.

Example: Using grid-template-columns

Scenario Questions

0-2 years experience

Follow-up Questions