![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS grid-area Property
![CSS grid-area Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-grid-area.webp)
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
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
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.
<!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.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
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
If you have any doubts regarding this article (CSS grid-area Property), please comment here. I will help you immediately.