CSS Grid Template is a powerful tool that allows you to define the layout of elements within a grid using a repetitive and declarative structure. You can combine various CSS Grid properties to create complex layouts easily and efficiently. In this section, we will explore how to use grid-template-columns, grid-template-rows, and grid-template-areas to define the layout of a grid.

Defining Column and Row Templates

grid-template-columns

The grid-template-columns property defines the structure of the columns in your grid. You can specify multiple column sizes separated by spaces.

css

In this example, we create three columns with widths of 100px, 200px, and 100px respectively.

grid-template-rows

The grid-template-rows property defines the structure of the rows in your grid.

css

Here, the grid has two rows: the first one is 100px and the second one is 200px.

mobile-image: Placeholder: Image showing a Grid with columns and rows of different widths and heights

Defining Grid Areas

grid-template-areas

The grid-template-areas property allows you to create named areas within the grid. This makes it easier to place elements in the layout.

css

html

In this example, four grid areas are defined: header, sidebar, main, and footer, each occupying multiple cells in the grid.

desktop-image: Placeholder: Image showing a Grid with areas defined as header, sidebar, main, and footer

Combining Column, Row, and Area Templates

You can combine grid-template-columns, grid-template-rows, and grid-template-areas to create concise and complex layouts.

css

html

This layout creates a structure with a header that spans the entire width, a sidebar and a main content area that spans two columns, and a footer that also spans the entire width.

mobile-image: Placeholder: Image showing a Grid with a combination of columns, rows, and areas

Repeating Tracks with repeat()

The repeat() function is useful for creating repetitive patterns in the grid without having to write redundant styles.

css

desktop-image: Placeholder: Image showing a Grid with three equal columns and two equal-height rows

Using minmax() for Flexible Templates

The minmax() function allows you to define a minimum and maximum size for the tracks, making the grid more flexible and adaptable.

css

mobile-image: Placeholder: Image showing a Grid with flexible columns using minmax()

Complete Example

A complete example incorporating all the properties grid-template-columns, grid-template-rows, and grid-template-areas:

html

This example creates a grid container with a combination of column sizes, rows, and named areas, providing a structured and adaptive layout.

Conclusion

Using grid-template-columns, grid-template-rows, and grid-template-areas in CSS Grid allows you to define detailed design templates in a clear and concise manner. These concepts are fundamental for creating dynamic and flexible layouts that adapt to a variety of design requirements and devices.