What does the grid-template-columns property do?
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
Defines the number of columns in the grid.
Specifies the width of each column using lengths (
px,em), percentages (%), fractions (fr), orauto.Supports the
repeat()function for repeating columns with the same size.Works in combination with
grid-template-rowsto 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.
Example: Using grid-template-columns