Grid Container Properties (display, grid-template-columns, grid-template-rows)

CSS Grid Layout is a powerful tool in modern web design, allowing developers to create complex two-dimensional grid layouts through declarative syntax. To use the Grid layout effectively, it is crucial to accurately understand and configure container properties. This article delves into core properties such as display, grid-template-columns, and grid-template-rows, along with their practical applications in development.
Before applying a Grid layout, the parent element must first be converted into a Grid container. This is achieved by setting the display property to grid. Only when an element's display value is set to grid does it activate the Grid layout mode and become capable of accepting grid positioning information for its child elements (such as grid-column and grid-row).

.container {
  display: grid;
}

It is important to note that while display: grid is mandatory, containers do not automatically fill available space or perform complex layout calculations by default. To gain full control, it is generally recommended to also set explicit template dimension properties. Furthermore, if you wish for an element to automatically fill remaining space within the grid, it can be combined with grid-template-areas; however, in basic two-dimensional layouts, directly defining row and column templates is more common.

Defining Column Layout: grid-template-columns

The grid-template-columns property defines the structure of columns within a Grid container. It determines the width and spacing of each column, serving as the foundation for horizontal layout construction. This property accepts multiple length values (such as pixels, percentages, fr units, or auto), where each value corresponds to one column.

• Fixed Width: Use specific numerical values, such as 100px.
• Relative Proportions: Use percentages, such as 20% 40% 40%, which is suitable for responsive layouts.
• Flexible Space: Use fr (fraction) units to automatically allocate remaining space based on content.
• Mixed Modes: You can combine multiple units, such as 150px 1fr 200px.

.example-grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

In this example, the first and third columns are fixed at a width of 200 pixels, while the middle column automatically fills all remaining horizontal space. If you wish for all columns to be equal in width, you can use repeat(3, 1fr) for a simplified syntax.

Defining Row Layout: grid-template-rows

Similar to column layout, the grid-template-rows property defines the structure of rows within a Grid container. It determines the height and spacing of each row, being key to constructing vertical layouts. The syntax logic of this property is identical to that of grid-template-columns, also supporting pixels, percentages, fr units, and the repeat() function.

.example-grid {
  display: grid;
  grid-template-rows: auto 100px 1fr;
}

In this configuration, the height of the first row is determined by its content (auto), the second row is fixed at a height of 100 pixels, and the third row occupies all remaining vertical space. This combination is particularly well-suited for creating layout structures that include fixed-height sidebars and variable-height main content areas.

Constructing Complex Layouts with Row and Column Properties

In actual development, it is often necessary to define both columns and rows simultaneously to form a complete two-dimensional grid. Combining grid-template-columns and grid-template-rows allows for precise control over the size relationships of each cell. Additionally, the gap property can be utilized to uniformly set the spacing between rows and columns, making the layout tidier.

.complex-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px; /* Uniformly set row height and column width spacing */
}

Through the code above, we create a layout with three columns, where the first row adapts to content height, the second row occupies the primary space, and the third row has a fixed height. Combined with the gap property, each cell maintains a 20-pixel gap between them, whether horizontally or vertically.

Summary and Best Practices

Mastering the core properties of Grid containers is key to improving frontend development efficiency. display: grid acts as the switch to start the layout, while grid-template-columns and grid-template-rows serve as the cornerstone for building the grid skeleton. Developers should flexibly choose length units based on page content requirements: use pixels for components with fixed dimensions, and use percentages or fr units for responsive layouts.

In practical application, it is recommended to follow these best practices:

1. Explicit Definition: Explicitly specify the number of columns and rows as much as possible to avoid relying on default auto-filling, which can lead to uncontrollable layouts.
2. Unified Spacing: Use the gap property instead of manually setting padding for each cell to maintain visual consistency.
3. Responsive Adaptation: Dynamically adjust template properties using media queries so that Grid layouts can smoothly adapt to different screen sizes.

By reasonably utilizing these core properties, developers can overcome the limitations of traditional floating and Flexbox in complex two-dimensional layouts, creating web structures that are more flexible, organized, and high-performance.