CSS grid-area Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 15 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The grid-area property in CSS is used to define a grid item's size and location within a grid layout. It is a shorthand property that can combine the properties grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

This property provides an efficient way to place and size grid items, making it easier to design complex grid layouts.

💡 Syntax

The syntax for the grid-area property can take two forms: the shorthand form or using grid line names.

Shorthand Syntax

Syntax

Copied

element {
  grid-area: row-start / column-start / row-end / column-end;
}

row-start: The line where the item's row starts.
column-start: The line where the item's column starts.
row-end: The line where the item's row ends.
column-end: The line where the item's column ends.

Line Names Syntax

Syntax

Copied

element {
  grid-area: grid-area-name;
}

grid-area-name: The name of the grid area defined by the grid-template-areas property.

🎛️ Default Value

The default value for grid-area is auto / auto / auto / auto, which means the grid item will be placed in the next available cell according to the grid's flow.

🏠 Property Values

Value	Description
row-start / column-start / row-end / column-end	Specifies the lines where the grid item's row and column start and end.
grid-area-name	Specifies a named area defined by the grid-template-areas property.

📄 Example

In this example, we'll define a simple grid layout and place an item using the grid-area property.

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-area Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
    }
    .item {
      background-color: lightblue;
      grid-area: 2 / 1 / 4 / 3;
    }
  </style>
</head>
<body>
  <h1>Grid Area Example</h1>
  <div class="container">
    <div class="item">Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
  </div>
</body>
</html>

In this example, Item 1 spans from row 2 to row 4 and from column 1 to column 3, effectively covering a 2x2 area in the grid.

🖥️ Browser Compatibility

The grid-area property is well-supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It's always a good idea to test your grid layouts across different browsers to ensure compatibility.

🎉 Conclusion

The grid-area property is a powerful tool for creating flexible and complex grid layouts in CSS.

By using this property, you can precisely control the placement and sizing of grid items, allowing for more creative and organized web designs. Experiment with different grid configurations and see how the grid-area property can enhance your layout designs.