Definition
The grid-template CSS property is a shorthand property that combines both grid-template-rows and grid-template-columns properties. It is used in grid layouts to define the structure, size, and number of rows and columns in a grid container.
The grid-template property accepts values that specify the size and number of rows and columns. You can define the rows and columns using length values, fractional units (fr), the auto keyword, or the minmax() function.
Here’s an example:
.grid-container {
display: grid;
grid-template: 100px 1fr / 1fr 2fr 1fr;
}
In this example, the grid-template property sets up a grid layout with three rows and three columns. The rows are defined as 100px for the first row, and the remaining space is divided evenly (1fr) for the second row. The columns are defined as 1fr, 2fr, and 1fr, respectively.
Using grid-template, you can create flexible and responsive grid layouts, defining the structure and sizing of both rows and columns in a concise way. It allows for the creation of versatile grid structures that adapt to different screen sizes and content requirements.