Definition
The grid-template-columns CSS property is used in grid layouts to define the size and number of columns in a grid container.
The grid-template-columns property accepts a list of values that represent the width of each column. You can specify the width using length values (e.g., pixels or percentages), fractional units (e.g., fr), or the auto keyword. Additionally, you can use the repeat() function to specify a repeated pattern of column sizes.
Here’s an example:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
In this example, the grid-template-columns: 1fr 2fr 1fr; rule sets up a grid layout with three columns. The first and third columns have a width of 1fr, which means they will take up an equal share of the available space. The second column has a width of 2fr, which means it will take up twice as much space as the other columns.
By using grid-template-columns, you can create flexible and responsive grid layouts, specifying the width of each column based on your design requirements.