In CSS Grid, tracks are the rows and columns that make up the grid. Properly defining these tracks is crucial for creating layouts that work well in various situations. Here we will explore how to specify rows and columns in detail.

grid-template-columns Property

The grid-template-columns property defines the number and size of the columns in the Grid container.

css

This code creates three columns with widths of 100px, 200px, and 100px, respectively.

grid-template-rows Property

Similar to grid-template-columns, the grid-template-rows property defines the number and size of the rows in the Grid container.

css

This example creates a Grid with two equal columns and two rows of 50px and 100px, respectively.

Measurement Units

When defining tracks, you can use various units of measurement:

1. px: pixels.
2. %: percentage of the Grid container.
3. fr: fraction of the available space. One of the most useful units in CSS Grid.
4. auto: automatic size based on content.
5. min-content and max-content: the minimum and maximum size of the content.

css

repeat() Function

The repeat() function is a handy way to define multiple tracks with a repeating pattern.

css

minmax() Function

The minmax() function defines a minimum and maximum size for a track. This is useful for creating responsive Grids.

css

auto-fit and auto-fill Functions

auto-fit and auto-fill are advanced functions that allow creating adaptive Grids that fill the available space automatically.

css

Complete Example

Let's apply these concepts in a more detailed example:

html

In this example, we use the repeat() function to create three equal columns, and define three rows: two of 100px and one automatic. We also add a 10px gap between all tracks.

Conclusion

Defining rows and columns tracks in CSS Grid is fundamental for correctly structuring the layout of your design. By using different units, functions, and techniques, you can create highly adaptable and precise Grids that fit the needs of your project.