Course
Grid
CSS Tutorial
This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.
grid
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:
Possible Values
- <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.
<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: