CSS Grid-Template is a powerful layout system that allows developers to create complex and responsive layouts with ease. It is a two-dimensional grid system that allows you to define rows and columns, and then place content within those rows and columns. This makes it an ideal choice for creating complex layouts that need to be responsive across different screen sizes and devices.
The grid-template property is used to define the grid layout. It is a shorthand property that combines the grid-template-rows, grid-template-columns, and grid-template-areas properties. The grid-template-rows property is used to define the height of each row in the grid, while the grid-template-columns property is used to define the width of each column. The grid-template-areas property is used to define the placement of content within the grid.
Here are some examples of how to use the grid-template property:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
In this example, we have defined a grid container with three columns and two rows. Each column has a width of 1fr, which means that they will take up an equal amount of space. The rows have a height of 100px each.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
}
This example is similar to the previous one, but we have used the repeat() function to simplify the code. The repeat() function takes two arguments: the number of times to repeat the value, and the value itself. In this case, we are repeating the value 1fr three times for the columns, and the value 100px two times for the rows.
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 1fr 2fr 2fr;
grid-template-rows: 100px 1fr 100px;
}
In this example, we have defined a more complex grid layout using the grid-template-areas property. We have defined three rows and three columns, and then used the grid-template-areas property to define the placement of content within the grid. The header and footer are each one row and three columns wide, while the sidebar and content are each two columns wide and one row tall.
Overall, the grid-template property is a powerful tool for creating complex and responsive layouts. By defining rows and columns, and then placing content within those rows and columns, you can create layouts that work well across different screen sizes and devices.