CSS grid-template

The grid-template property in CSS is used to define the size of the rows and columns in a grid layout. This property allows you to create flexible grid layouts for your web page.

The syntax for the grid-template property is:

grid-template: [row1 size] [row2 size] ... / [column1 size] [column2 size] ...;

Here is an example that illustrates how the grid-template property works:

Result:
1
2
3
4
5
6

In this example, we have a grid layout with 3 rows and 2 columns. The size of the rows are 100px, 200px, and 100px, and the size of the columns are 1fr and 2fr. The fr unit is used to distribute the available space in the grid layout.

You can also use the grid-template property to specify the number of columns and their size. Here is an example:

Result:
1
2
3
4
5
6

In this example, we have a grid layout with 3 rows and 2 columns. The repeat() function is used to define the number of rows and columns with the same size.

As you can see, the grid-template property allows you to create flexible grid layouts for your web page by specifying the size of the rows and columns in the grid.