Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS grid-template-rows Property

Posted in CSS Tutorial
Updated on Oct 03, 2024
By Mari Selvan
πŸ‘οΈ 16 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
CSS grid-template-rows Property

Photo Credit to CodeToFun

πŸ™‹ Introduction

The grid-template-rows property in CSS is a key component of the CSS Grid Layout system. It defines the size of each row in a grid container, allowing you to create complex and responsive grid layouts.

This property helps in organizing and aligning grid items within rows, providing control over the layout of your web content.

πŸ’‘ Syntax

The syntax for the grid-template-rows property is as follows:

Syntax
Copied
Copy To Clipboard
element {
  grid-template-rows: value;
}

Here, value represents a space-separated list of row sizes. Each size can be specified using a length, a percentage, the fr unit, or the auto keyword.

πŸŽ›οΈ Default Value

The default value of the grid-template-rows property is none, which means the rows of the grid will be auto-sized based on the content.

🏠 Property Values

ValueDescription
lengthA specific length value, such as 100px, 2em, etc. This sets the exact size of the row.
percentageA percentage of the grid container’s height, such as 50%.
fr (fractional unit)Represents a fraction of the available space in the grid container. For example, 1fr and 2fr denote 1 part and 2 parts of the available space, respectively.
autoThe size of the row is determined by its content. This is the default behavior if no size is specified.

πŸ“„ Example

In this example, we create a grid layout with three rows of different sizes: a fixed height row, a flexible row, and an automatic row based on content.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS grid-template-rows Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: 100px 1fr auto;
      gap: 10px;
    }
    .grid-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Grid Layout with Different Row Sizes</h1>
  <div class="grid-container">
    <div class="grid-item">Row 1 (100px)</div>
    <div class="grid-item">Row 2 (Flexible)</div>
    <div class="grid-item">Row 3 (Auto-sized)</div>
  </div>
</body>
</html>

πŸ–₯️ Browser Compatibility

The grid-template-rows property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Ensure that you test your grid layouts across different browsers to verify that your design appears as intended.

πŸŽ‰ Conclusion

The grid-template-rows property is essential for creating well-structured grid layouts in CSS.

By defining the size of rows, you can create flexible and responsive designs that adapt to different screen sizes and content types. Experiment with various values to see how they affect the layout and achieve the design you envision.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy