CSS Grid Property
The grid property in CSS is a shorthand property in CSS which is known for setting all the explicit and implicit grid properties within a single declaration. The implicit or explicit grid properties can be specified within a single grid declaration.
The grid property may be specified as one of the values like grid-auto-flow, grid-auto-columns, grid-auto-rows, grid-template-areas, grid-template-rows, or grid-template-columns.
Syntax
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Example: CSS Grid Property
In the example below, we are using the grid property with different border styles, colors, and their different values. In this case, we have given the grid property as repeat and over-flow.
The CSS styling is done inside the opening and closing head tags of the HTML.
The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags.
<!DOCTYPE html>
<html>
<head>
<title>The grid property in CSS</title>
<style type="text/css">
#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
color: red;
}
#container > div {
background-color: #8ca0ff;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Output
Example: CSS Grid Property
In the example below, we are using the grid property with different border styles, colors, and their different values. In this case, we have given the grid property as auto-flow and 1fr.
The CSS styling is done inside the opening and closing head tags of the HTML.
The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags.
<!DOCTYPE html>
<html>
<head>
<title>The grid property in CSS</title>
<style type="text/css">
#container {
display: grid;
grid: auto-flow / 1fr 1fr 1fr;
color: red;
}
#container > div {
background-color: pink;
width: 50px;
height: 50px;
color: red;
}
</style>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Output
Live example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
57 |
57 |
| Edge |
16 |
16 |
| Firefox |
52 |
52 |
| Internet Explorer |
no |
no |
| Opera |
44 |
44 |
| Safari |
10.1 |
10.1 |
| Webview Android |
57 |
57 |
| Chrome Android |
57 |
57 |
| Firefox Android |
52 |
52 |
| Opera Android |
43 |
43 |
| IOS Safari |
10.3 |
10.3 |
| Samsung Internet |
6.0 |
6.0 |
Conclusion
The initial value for the grid-template-row, grid-template-columns, and grid-template-areas is 'none', for the grid-auto-rows and grid-auto-columns is 'auto', for the grid-column-gap and grid-row-gap property is zero and for the column-gap and row-gap is 'normal'. This property is applicable to grid containers. It is not an inherited property. The percentage values refer to the corresponding dimensions of the content area. The computed value for this property is the as specified one or a percentage or absolute length.
