After designating an element as a grid container using display: grid; or display: inline-grid;, its direct children become grid items. To structure and control the layout of these items, you need to define the rows and columns of the grid. Rows and columns are known as grid tracks.
The grid-template-rows and grid-template-columns properties determine the number and size of grid rows and columns, which are then applied to the grid container. Together with grid template areas, they define a clear grid.
The value for properties is a space-separated list, where each value requires the size of a grid track. The order in which you list the values determines the order of the tracks.
Require track sizes using various units and keywords:
- Fixed Lengths: Like pixels (px), ems (em), or other absolute units.
Example:
grid-template-columns: 100px 200px;.- Percentages: It is a grid container’s dimension.
Example:
grid-template-columns: 25% 75%;.- Fraction Units (fr): A fraction of the available space in the grid container. fr units distribute the remaining space after accounting for fixed-size tracks.
Example:
grid-template-columns: 1fr 3fr;It creates two columns, the second being three times wider than the first.
grid-template-columns: 1fr 1fr 1fr;The code generates three columns of equal size, filling the available width.
- auto: The track size grows as necessary to accommodate the size of its content or takes up any remaining space.
Example:
grid-template-rows: auto auto auto;.grid-template-columns: 1fr 1fr 1fr; In the above example equivalent to grid-template-columns: auto auto auto; in terms of filling space.
- Keywords: Such as min-content, max-content, or fit-content.
Repeat Function
You can mix and match the units within a single definition.
You can use the repeat() function to define multiple tracks of the same size or a repeating pattern of track sizes. The repeat() function takes the number of repetitions and the track size(s) as arguments.
Example:
grid-template-columns: repeat(4, 1fr);creates four equally sized columns. repeat(3, 2fr 1fr) defines six tracks by repeating the pattern 2fr 1fr three times.
Code Examples:
Consider the following basic HTML structure:
<section class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</section>Example 1: Fixed Size Tracks
It creates a grid with two columns, each 100px wide, and three rows, each 50px tall.
.container {
display: grid; /* Makes the container a grid */
grid-template-columns: 100px 100px; /* Defines two columns, each 100px wide */
grid-template-rows: 50px 50px 50px; /* Defines three rows, each 50px tall */
}Example 2: Flexible Tracks using fr Units
it creates a grid with two columns. The first column takes 1 fraction of the available space, and the second takes 3 fractions (making it three times wider). It has three equally sized rows that divide the available vertical space.
.container {
display: grid; /* Makes the container a grid */
grid-template-columns: 1fr 3fr; /* Defines two columns with flexible widths */
grid-template-rows: 1fr 1fr 1fr; /* Defines three equally flexible rows */
}Example 3: Mixing Units
It creates a grid with a fixed-width sidebar (150px), a flexible main content column (1fr), a fixed-height header (200px), a flexible content row (1fr), and a fixed-height footer (200px).
.container {
display: grid; /* Makes the container a grid */
grid-template-columns: 150px 1fr; /* Fixed-width first column, flexible second */
grid-template-rows: 200px 1fr 200px; /* Fixed-height first/last rows, flexible middle */
}Example 4: Using the repeat() Function
It creates a grid with four equally sized columns using the repeat() function.
.container {
display: grid; /* Makes the container a grid */
grid-template-columns: repeat(4, 1fr); /* Defines four equal flexible columns */
}Properties establish the structure of your CSS Grid layout. Once the grid tracks are defined, you can place grid items within the grid cells formed by the intersection of these tracks.
While grid-template-rows and grid-template-columns define the sizes of clear tracks, CSS Grid can also create implied tracks if items are placed outside the clearly defined grid. These implicit tracks are sized by the grid-auto-rows and grid-auto-columns properties. For example, CSS Grid Layout, grid-auto-rows is used to define the size of automatically generated rows needed to contain all content.
For shorthand, you can combine grid-template-rows, grid-template-columns, and even grid-template-areas using the grid-template property. A more comprehensive grid shorthand also exists that controls implicit grid properties .
CSS3 Topics