CSS grid Property

Posted in CSS Tutorial

Updated on Aug 04, 2024

By Mari Selvan

👁️ 26 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The CSS grid property is a powerful tool that allows web developers to create complex and responsive grid-based layouts using a straightforward and declarative syntax.

This property is part of the CSS Grid Layout Module, which enables the design of web pages using a grid system with rows and columns. With CSS Grid, you can define areas of your web page, align items, and distribute space in a way that wasn't possible with traditional CSS layout methods.

💡 Syntax

The grid property is a shorthand for defining grid-related properties in one declaration. The basic syntax is as follows:

Syntax

Copied

element {
  grid: [grid-template-rows] / [grid-template-columns];
}

However, the grid shorthand can also include other properties, such as grid-template-areas, grid-auto-flow, grid-auto-rows, and grid-auto-columns.

🎛️ Default Value

There is no default value for the grid property itself since it is a shorthand. The individual properties within the shorthand each have their own default values.

🏠 Property Values

Value	Description
grid-template-rows	Specifies the sizes of the rows.
grid-template-columns	Specifies the sizes of the columns.
grid-template-areas	Defines named grid areas.
grid-auto-flow	Controls how auto-placed items are inserted in the grid.
grid-auto-rows	Specifies the size of auto-generated rows.
grid-auto-columns	Specifies the size of auto-generated columns.

📄 Example

In this example, we'll create a simple grid layout with three rows and three columns.

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 Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: 100px 100px 100px;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }
    .grid-item {
      background-color: #ff5733;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <h1>Simple Grid Layout</h1>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The grid property is well-supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. For best results, always test your layout across different browsers and devices.

🎉 Conclusion

The CSS grid property is a versatile and powerful tool for creating complex, responsive web layouts with ease.

By mastering this property, you can design sophisticated grid systems that adapt to various screen sizes and enhance the overall user experience. Experiment with different grid configurations and discover the endless possibilities that CSS Grid offers for web design.