Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS grid-template Property

Posted in CSS Tutorial
Updated on Oct 03, 2024
By Mari Selvan
👁️ 12 - Views
⏳ 4 mins
💬 1 Comment
CSS grid-template Property

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
Copy To Clipboard
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

ValueDescription
noneNo 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
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 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.

👨‍💻 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