CSS grid property is a shorthand property used to declare all explicit and implicit grid properties in one declaration.
It’s a convenient and concise way to define the grid layout of an element. The grid property is a shorthand for the following individual grid-related properties:
- grid-template-rows
- grid-template-columns
- grid-template-areas
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-gap (or grid-row-gap and grid-column-gap)
Possible Values
- <grid-template> − Works the same as the grid template shorthand.
- <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns> − Sets grid-template-rows to the specified value (auto-flow or dense). If the auto-flow keyword is to the right of the slash, it sets grid-auto-flow to column. If the dense keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If grid-auto-columns is omitted, it is set to auto.
- [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> − Sets grid-auto-columns to the specified value. If the auto-flow keyword is to the left of the slash, it sets grid-auto-flow to row. If the dense keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If grid-auto-rows is omitted, it is set to auto.
Applies to
All the HTML elements.
DOM Syntax
object.style.grid = "<grid-template>|<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>| [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>";
CSS grid – <grid-template>
The following example demonstrates that a grid set as grid: 100px/ 200px, has the first row 100px high and columns 200px wide −
<html><head><style>
.grid-box {
display: grid;
grid: 100px / 200px;
gap: 10px;
}
.grid-box > div {
background-color: red;
border: 3px solid lightgreen;
padding: 10px;
text-align: center;
}
</style></head><body><div class="grid-box"><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>CSS grid – minmax() / repeat()
The following example demonstrates that the use of grid: minmax(100px, min-content) / repeat(auto-fill, 50px); property.
- minmax(100px, min-content) is used for row sizing. Here, the minmax function defines a minimum size of 100px and a maximum size dependent on the content.
- repeat(auto-fill, 50px) is used for column sizing. The repeat function repeats the pattern for grid tracks. It uses auto-fill to create as many columns as possible within the available area, with each column having a fixed size of 50px.
<html><head><style>
.grid-container {
display: grid;
grid: minmax(100px, min-content) / repeat(auto-fill, 50px);
color: white;
text-align: center;
width: 300px;
}
.grid-container > div {
background-color: red;
border: 2px solid lightgreen;
margin: 5px;
}
</style></head><body><div class="grid-container"><div>Grid item 1</div><div>Grid item 2</div><div>Grid item 3</div><div>Grid item 4</div><div>Grid item 5</div><div>Grid item 6</div></div></body></html>CSS grid – auto-flow Value
The following example demonstrates that the use of the grid: auto-flow / 200px property sets row size to auto-flow, which automatically sizes the height of the row and set columns width to 200px −
<html><head><style>
.grid-container {
display: grid;
grid: auto-flow / 200px;
color: white;
width: 300px;
border: 2px solid lightgreen;
}
.grid-container > div {
background-color: red;
border: 2px solid lightgreen;
padding: 10px;
}
</style></head><body><div class="grid-container"><div>Grid item 1</div><div>Grid item 2</div><div>Grid item 3</div><div>Grid item 4</div><div>Grid item 5</div><div>Grid item 6</div></div></body></html>CSS grid – auto-flow dense Value
The following example demonstrates the use of grid: 100px 200px / auto-flow dense property. It specifies two rows with heights of 100px and 200px.
The columns are set to auto-flow dense, which automatically place items in the grid and dense, to fit as many grid elements as feasible without gaps.
<html><head><style>
.grid-container {
display: grid;
grid: 100px 200px / auto-flow dense;
color: white;
width: 300px;
border: 2px solid lightgreen;
}
.grid-container > div {
background-color: red;
border: 2px solid lightgreen;
padding: 10px;
}
</style></head><body><div class="grid-container"><div>Grid item 1</div><div>Grid item 2</div><div>Grid item 3</div><div>Grid item 4</div><div>Grid item 5</div><div>Grid item 6</div></div></body></html>CSS grid – [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>
The following example demonstrates that the grid: auto-flow 50px / repeat(3, 150px) property sets the rows to auto-flow 50px, which automatically places items in the grid with row height set to 50px.
The repeat(3, 150px) specifies that there should be three columns, each 150px wide.
<html><head><style>
.grid-container {
display: grid;
grid: auto-flow 50px / repeat(3, 150px);
color: white;
width: 300px;
border: 2px solid lightgreen;
}
.grid-container > div {
background-color: red;
border: 2px solid lightgreen;
padding: 10px;
}
</style></head><div class="grid-container"><div>Grid item 1</div><div>Grid item 2</div><div>Grid item 3</div><div>Grid item 4</div><div>Grid item 5</div><div>Grid item 6</div></div></body></html>CSS grid – Related Properties
Following is the list of CSS properties related to grid:
| property | value |
|---|---|
| display | Define whether an element is a grid container or an inline grid container. |
| gap | Defines the gap between rows and columns. |
| grid-area | Defines the location and size of the grid item within a grid layout. |
| grid-column | Control the placement of a grid item within the grid container in the column direction. |
| grid-row | Control the placement of a grid item within the grid container in the row direction. |
| grid-template | Specify the grid columns, grid rows and grid areas. |
| grid-auto-columns | Determines the size of automatically generated grid column tracks or a pattern of such tracks. |
| grid-auto-rows | Determines the size of automatically- generated grid rows tracks or a pattern of such tracks. |
| grid-auto-flow | Specifies arrangement of the grid item within the grid. |
Leave a Reply