Скачать или смотреть Creating an Expandable CSS Grid with Defined Row Heights

Learn how to create a responsive CSS grid with a specific height for the first row and dynamically sized subsequent rows.
---
This video is based on the question https://stackoverflow.com/q/66921280/ asked by the user 'Kolyo Peev' ( https://stackoverflow.com/u/8754078/ ) and on the answer https://stackoverflow.com/a/66921509/ provided by the user 'Temani Afif' ( https://stackoverflow.com/u/8620333/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Expandable css grid with defined row heights

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating an Expandable CSS Grid with Defined Row Heights

When designing web layouts, a CSS grid can be an effective solution for displaying data in a structured format. However, challenges can arise when you want to control the height of individual rows in your grid. Today, we'll tackle a common problem: how to create a grid with a defined height for the first row and a different height for subsequent rows.

The Problem

Imagine you need to design a grid that expands with the amount of data received from your backend. In this case, you want to set:

7 columns in your grid.

The first row should have a height of 72px.

Subsequent rows should be 86px each.

Unfortunately, using conventional settings with grid-auto-rows may lead to inconsistencies where additional rows don't match the intended heights.

For example, you might find that the height of your third row is unexpectedly yielding a size like 73.23px, which is far from the desired height of 86px. So how can we achieve the expected outcome?

The Solution

Let's break down how to set up your CSS grid correctly, ensuring each row adheres to the specified heights.

Step 1: Set Up Your Grid Layout

Here’s the foundational CSS code for the grid:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of Key Properties

display: grid;: This rule enables the grid layout model on the element.

grid-template-columns: repeat(7, minmax(auto, 248px));:

This defines 7 columns in the grid.

Each column can expand automatically, but they have a maximum width of 248px.

grid-template-rows: 72px;:

This sets the height of the first row to 72 pixels.

grid-auto-rows: 86px;:

This property applies to all other rows in the grid that are auto-generated, ensuring they have a height of 86 pixels.

gap: 8px;:

This creates a space of 8 pixels between each item in the grid for visual clarity.

Conclusion

Using the above approach, you can ensure the first row of your CSS grid retains its specified height while subsequent rows conform to your desired height. This will lead to a clean and organized layout that responds well to dynamic content without sacrificing design integrity.

By leveraging the grid-template-rows alongside grid-auto-rows, you establish better control over the row heights in your CSS grid, avoiding unexpected results.

If you need to make adjustments for different screen sizes, consider incorporating media queries to modify these values accordingly. Happy coding!