CSS | Grid-template-rows Property - GeeksforGeeks

Trang chủ » Html Css Grid Row Height » CSS | Grid-template-rows Property - GeeksforGeeks

Có thể bạn quan tâm

The grid-template-rows property in CSS defines the number and height of rows in a grid layout. It accepts values like none, auto, max-content, min-content, and specific lengths, allowing for flexible and responsive design customization.

Syntax

grid-template-rows: none|auto|max-content| min-content|length| initial|inherit;

Property Values

ValueDescription
noneDo not set the height of the grid-template-row property; creates rows when content dictates.
autoSets the row size automatically based on container and content size.
max-contentSizes the row to accommodate the maximum content within the grid items.
min-contentSizes the row to accommodate the minimum content within the grid items.
lengthSets the size of the row according to the specified length (e.g., px, em, etc.).

Example 1: Using auto and length Values

In this example, we create a grid layout with 4 columns and 2 rows, each cell containing a letter from A to H, styled with background colors and borders.

html <!DOCTYPE html> <html> <head> <title> CSS grid-template-rows Property </title> <style> .geeks{ background-color:green; padding:30px; display:grid; grid-template-columns:autoautoautoauto; grid-template-rows:autoauto; grid-gap:10px; } .GFG{ background-color:white; border:1pxsolidwhite; font-size:30px; text-align:center; } </style> </head> <body> <div class="geeks"> <div class="GFG">A</div> <div class="GFG">B</div> <div class="GFG">C</div> <div class="GFG">D</div> <div class="GFG">E</div> <div class="GFG">F</div> <div class="GFG">G</div> <div class="GFG">H</div> </div> </body> </html>

Output:

Example 2: Using min-content and max-content Values

In this example we creates a grid layout with 4 columns and 2 rows. The first row adjusts automatically, and the second row is fixed at 150px, displaying letters A to H in styled cells.

html <!DOCTYPE html> <html> <head> <title> CSS grid-template-rows Property </title> <style> .geeks{ background-color:green; padding:30px; display:grid; grid-template-columns:autoautoautoauto; grid-template-rows:auto150px; grid-gap:10px; } .GFG{ background-color:white; border:1pxsolidwhite; font-size:30px; text-align:center; } </style> </head> <body> <div class="geeks"> <div class="GFG">A</div> <div class="GFG">B</div> <div class="GFG">C</div> <div class="GFG">D</div> <div class="GFG">E</div> <div class="GFG">F</div> <div class="GFG">G</div> <div class="GFG">H</div> </div> </body> </html>

Output:

Supported Browsers

  • Google Chrome 5.0
  • Edge 12
  • Mozilla 4.0
  • Safari 5.0
  • Opera 11.1

CSS grid-template-rows Property – FAQs

What does the grid-template-rows property do in CSS?

The grid-template-rows property defines the height of each row in a grid container. It allows you to set fixed heights, flexible heights using fractions (fr), or dynamic sizes using functions like minmax().

How do I define rows using grid-template-rows?

You can define row heights like this: grid-template-rows: 100px auto 1fr;, which creates three rows: the first is 100px, the second takes up as much space as its content, and the third fills the remaining space.

Can grid-template-rows be used with auto-fit or auto-fill?

While auto-fit and auto-fill are typically used with grid-template-columns, you can still control row sizes responsively using functions like minmax() with grid-template-rows.

What’s the difference between grid-template-rows and grid-auto-rows?

Grid-template-rows defines the explicit row structure, while grid-auto-rows controls the size of rows that are automatically added when content overflows the defined grid.

How does grid-template-rows work with grid-template-areas?

Grid-template-rows determines the row heights within the overall grid layout, while grid-template-areas defines named areas. The row heights should align with the areas to ensure a consistent design.

Comment More info Next Article Basics of Responsive Web Design - Media Queries

A

AkshayGulati Follow Improve Article Tags :
  • CSS
  • Web Technologies
  • CSS-Properties
  • Web technologies

Từ khóa » Html Css Grid Row Height