![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS grid Property
![CSS grid Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-grid.webp)
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:
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.
<!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.
👨💻 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 Property), please comment here. I will help you immediately.