CSS grid-template Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The grid-template property in CSS is a shorthand property that allows you to define the rows, columns, and areas of a grid layout in a single declaration.

This property is essential for creating complex grid layouts with ease and flexibility, making it a powerful tool in modern web design.

💡 Syntax

The grid-template property can be used to set both the grid-template-rows and grid-template-columns properties simultaneously, as well as define named grid areas.

Syntax

Copied

element {
  grid-template: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas>;
}

🎛️ Default Value

The default value of the grid-template property is none, meaning that no explicit grid layout is defined, and the browser will use its default behavior.

🏠 Property Values

Value	Description
none	No grid layout is defined.
<grid-template-rows>	Defines the row sizes of the grid.
<grid-template-columns>	Defines the column sizes of the grid.
<grid-template-areas>	Defines named grid areas within the grid.

📄 Example

In this example, we'll create a simple grid layout with three rows and two columns, defining specific sizes for each.

index.html

Copied

<!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 Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template: 
        "header header" 50px
        "sidebar content" 1fr
        "footer footer" 30px / 150px 1fr;
    }
    .header { grid-area: header; background-color: #f2f2f2; }
    .sidebar { grid-area: sidebar; background-color: #e2e2e2; }
    .content { grid-area: content; background-color: #d2d2d2; }
    .footer { grid-area: footer; background-color: #c2c2c2; }
  </style>
</head>
<body>
  <h1>Grid Template Example</h1>
  <div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The grid-template property is well-supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is advisable to test your grid layouts across different browsers to ensure consistent behavior.

🎉 Conclusion

The grid-template property simplifies the process of defining complex grid layouts by combining multiple grid-related properties into a single declaration.

By using this property, you can create responsive and flexible grid-based designs that adapt to various screen sizes and resolutions. Experiment with different grid configurations to fully leverage the power of CSS Grid Layout.