revision:
- is a shorthand property for: "grid-template-rows". "grid-template-columns", "grid-template-areas", "grid-auto-rows" , "grid-auto-columns", "grid-auto-flow".
Property values:
none : default value. No specific sizing of the columns or rows
grid-template-rows / grid-template-columns : specifies the size(s) of the columns and rows
grid-template-areas : specifies the grid layout using named items
grid-template-rows / grid-auto-columns : specifies the size (height) of the rows, and the auto size of the columns
grid-auto-rows / grid-template-columns : specifies the auto size of the rows, and sets the grid-template-columns property
grid-template-rows / grid-auto-flow grid-auto-columns : specifies the size (height) of the rows, and how to place auto-placed items, and the auto size of the columns
grid-auto-flow grid-auto-rows / grid-template-columns : specifies how to place auto-placed items, and the auto size of the rows, and sets the grid-template-columns property
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: grid property
<div>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</div>
<style>
.grid-container {display: grid; grid: 12vw / auto auto auto; grid-gap: 1vw; background-color: #2196F3;
padding: 1vw;}
.grid-container > div {background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 2vw 0;
font-size: 3vw;}
</style>
- specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties: " grid-row-start", "grid-column-start", "grid-row-end", "grid-column-end".
The grid-area property can also be used to assign a name to a grid item. Named grid items can then be referenced to by the "grid-template-areas" property of the grid container.
Property values:
grid-row-start : specifies on which row to start displaying the item.
grid-column-start : specifies on which column to start displaying the item.
grid-row-end : specifies on which row-line to stop displaying the item, or how many rows to span.
grid-column-end : specifies on which column-line to stop displaying the item, or how many columns to span.
itemname : specifies a name for the grid item
example: grid-area property
<div class="grid-container-a">
<div class="item1a">1</div>
<div class="item2a">2</div>
<div class="item3a">3</div>
<div class="item4a">4</div>
<div class="item5a">5</div>
<div class="item6a">6</div>
<div class="item7a">7</div>
</div>
</div>
<style>
.grid-container-a {display: grid; grid-template-columns: auto auto auto auto; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-a > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw;}
.item1a {grid-area: 2 / 1 / span 2 / span 3;}
</style>
example: grid-area property
<div>
<div class="grid-container-aa">
<div class="item-1aa">Header</div>
<div class="item-2aa">Menu</div>
<div class="item-3aa">Main</div>
<div class="item-4aa">Right</div>
<div class="item-5aa">Left</div>
<div class="item-6aa">Aside</div>
<div class="item-7aa">Footer</div>
</div>
</div>
<style>
.item-1aa{grid-area: header;}
.item-2aa{grid-area: menu;}
.item-3aa{grid-area: main;}
.item-4aa{grid-area: right;}
.item-5aa{grid-area: left;}
.item-6aa{grid-area: aside;}
.item-7aa{grid-area: footer;}
.grid-container-aa {display: grid; grid-template-areas:
"header header header header header"
"menu menu menu aside aside"
"main main main main main"
"left left left right right"
"footer footer footer footer footer";
grid-gap: 1vw; background-color: #2196F3; padding: 1vw;}
.grid-container-aa > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw;}
</style>
- sets a size for the columns in a grid container. This property affects only columns with the size not set.
Property values:
auto : default value. The size of the columns is determined by the size of the container
fit-content() : sets the size of the columns in length or %, and works like the column will use the available space, but it will never expand the max-content size
max-content : sets the size of each column depending on the largest item in the column
min-content : sets the size of each column depending on the smallest item in the column
minmax(min.max) : sets a size range greater than or equal to min and less than or equal to max
length : sets the size of the columns, by using a legal length value
% : sets the size of the columns, by using a percent value
example: grid-auto-columns property
<div class="grid-container-b">
<div class="item1-b">1</div>
<div class="item2-b">2</div>
<div class="item3-b">3</div>
<div class="item4-b">4</div>
<div class="item5-b">5</div>
<div class="item6-b">6</div>
</div>
</div>
<style>
.item1-b { grid-area: 1 / 1 / 2 / 2; }
.item2-b { grid-area: 1 / 2 / 2 / 3; }
.item3-b { grid-area: 1 / 3 / 2 / 4; }
.item4-b { grid-area: 2 / 1 / 3 / 2; }
.item5-b { grid-area: 2 / 2 / 3 / 3; }
.item6-b { grid-area: 2 / 3 / 3 / 4; }
.grid-container-b {display: grid; grid-auto-columns: 5vw; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-b > div {background-color: rgba(255, 255, 255, 0.8);
text-align: center; padding: 2vw 0; font-size: 3vw;}
</style>
- controls how auto-placed items get inserted in the grid.
Property values:
row : default value. Places items by filling each row
column : places items by filling each column
dense : place items to fill any holes in the grid
row dense : places items by filling each row, and fill any holes in the grid
column dense : places items by filling each column, and fill any holes in the grid
example: grid-auto-flow property
Insert items column by column:
Insert items row by row:
<div>
<p>Insert items column by column:</p>
<div class="grid-container-c" style="grid-auto-flow: column;">
<div class="item1-c">1</div>
<div class="item2-c">2</div>
<div class="item3-c">3</div>
<div class="item4-c">4</div>
</div>
<p>Insert items row by row:</p>
<div class="grid-container-d" style="grid-auto-flow: row;">
<div class="item1-d">1</div>
<div class="item2-d">2</div>
<div class="item3-d">3</div>
<div class="item4-d">4</div>
</div>
</div>
<style>
.grid-container-c, .grid-container-d {display: grid; grid-template-columns: auto auto auto;
grid-template-rows: auto auto; grid-gap: 1vw; background-color: #2196F3;
padding: 1vw;}
.grid-container-c > div, .grid-container-d > div {background-color: rgba(255, 255, 255, 0.8);
text-align: center; padding: 2vw 0; font-size: 2vw;
}
</style>
- sets a size for the rows in a grid container. This property affects only rows with the size not set.
Property values:
auto() : default value. The size of the rows is determined by the size of the largest item in the row
max-content : sets the size of each row to depend on the largest item in the row
min-content : sets the size of each row to depend on the smallest item in the row
length : sets the size of the rows, by using a legal length value.
example: grid-auto-rows property
Set the size to 10vw per row:
<div>
<p>Set the size to 10vw per row:</p>
<div class="grid-container-e">
<div class="item1-e">1</div>
<div class="item2-e">2</div>
<div class="item3-e">3</div>
<div class="item4-e">4</div>
<div class="item5-e">5</div>
<div class="item6-e">6</div>
</div>
</div>
<style>
.item1-e { grid-area: 1 / 1 / 2 / 2; }
.item2-e { grid-area: 1 / 2 / 2 / 3; }
.item3-e { grid-area: 1 / 3 / 2 / 4; }
.item4-e { grid-area: 2 / 1 / 3 / 2; }
.item5-e { grid-area: 2 / 2 / 3 / 3; }
.item6-e { grid-area: 2 / 3 / 3 / 4; }
.grid-container-e {display: grid;grid-auto-rows: 10vw; grid-gap: 1vw; background-color: #2196F3; padding: 1vw;}
.grid-container-e > div {background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 2vw 0; font-size: 2vw; }
</style>
- specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties: " grid-column-start", "grid-column-end".
Property values:
grid-column-start : specifies on which column to start displaying the item.
grid-column-end : specifies on which column-line to stop displaying the item, or how many columns to span.
example: grid-column property
Item1 will start on column 1, and span 2 columns:
<div>
<p>Item1 will start on column 1, and span 2 columns:</p>
<div class="grid-container-f">
<div class="item1-f">1</div>
<div class="item2-f">2</div>
<div class="item3-f">3</div>
<div class="item4-f">4</div>
<div class="item5-f">5</div>
<div class="item6-f">6</div>
<div class="item7-f">7</div>
</div>
</div>
<style>
.grid-container-f {display: grid;grid-template-columns: auto auto auto auto; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-f > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
.item1-f{grid-column: 1 /span 2;}
</style>
- defines how many columns an item will span, or on which column-line the item will end.
Property values:
auto : default value. The item will span one column
span n : specifies the number of columns the item will span
column-line : specifies on which column to end the display of the item
example: grid-column-end property
Item1 will span 3 columns:
<div>
<p>Item1 will span 3 columns:</p>
<div class="grid-container-g">
<div class="item1-g">1</div>
<div class="item2-g">2</div>
<div class="item3-g">3</div>
<div class="item4-g">4</div>
<div class="item5-g">5</div>
<div class="item6-g">6</div>
</div>
</div>
<style>
.grid-container-g {display: grid;grid-template-columns: auto auto auto auto; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-g > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
.item1-g{grid-column-end: span 3;}
</style>
- defines the size of the gap between the columns in a grid layout.: This property was renamed to column-gap in CSS3.
Property values:
grid-column-gap : any legal length value, like px or %. 0 is the default value.
example: grid-column-end property
This grid has a 4vw gap between columns (and a 1vw gap between rows):
<div>
<p>This grid has a 4vw gap between columns (and a 1vw gap between rows):</p>
<div class="grid-container-h">
<div class="item1-h">1</div>
<div class="item2-h">2</div>
<div class="item3-h">3</div>
<div class="item4-h">4</div>
<div class="item5-h">5</div>
<div class="item6-h">6</div>
<div class="item7-h">7</div>
<div class="item8-h">8</div>
<div class="item9-h">9</div>
<div class="item10-h">10</div>
<div class="item11-h">11</div>
<div class="item12-h">12</div>
</div>
</div>
<style>
.grid-container-h {display: grid;grid-template-columns: auto auto auto auto;
grid-column-gap: 4vw; grid-row-gap: 1vw; background-color: #2196F3; padding: 1vw;}
.grid-container-h > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
</style>
- defines on which column-line the item will start.
Property values:
auto : default value. The item will be placed following the flow
span n : specifies the number of columns the item will span
column-line : specifies on which column to start the display of the item
example: grid-column-gap property
Item1 will span 3 columns:
<div>
<p>Item1 will span 3 columns:</p>
<div class="grid-container-i">
<div class="item1-i">1</div>
<div class="item2-i">2</div>
<div class="item3-i">3</div>
<div class="item4-i">4</div>
<div class="item5-i">5</div>
<div class="item6-i">6</div>
</div>
</div>
<style>
.grid-container-i {display: grid;grid-template-columns: auto auto auto auto; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-i > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
.item1-i{grid-column-start: 2;}
</style>
- defines the size of the gap between the rows and columns in a grid layout. and is a shorthand property for the following properties: "grid-row-gap", "grid-column-gap".
This property was renamed to gap in CSS3.
Property values:
grid-row-gap: length; : sets the size of the gap between the rows in a grid layout. 0 is the default value
grid-column-gap: length; : sets the size of the gap between the columns in a grid layout. 0 is the default value
example: grid-column-start property
This grid has a 4vw gap between columns (and a 10px gap between rows):
<div>
<p>This grid has a 4vw gap between columns (and a 10px gap between rows):</p>
<div class="grid-container-j">
<div class="item1-j">1</div>
<div class="item2-j">2</div>
<div class="item3-j">3</div>
<div class="item4-j">4</div>
<div class="item5-j">5</div>
<div class="item6-j">6</div>
<div class="item7-j">7</div>
<div class="item8-j">8</div>
<div class="item9-j">9</div>
<div class="item10-j">10</div>
<div class="item11-j">11</div>
<div class="item12-j">12</div>
</div>
</div>
<style>
.grid-container-j {display: grid;grid-template-columns: auto auto auto auto;
grid-gap: 2vw 4vw; background-color: #2196F3; padding: 1vw;}
.grid-container-j > div {background-color: rgba(255, 255, 255, 0.8);
text-align: center; padding: 2vw 0; font-size: 2vw; }
</style>
- specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties: " grid-row-start", "grid-row-end".
Property values:
grid-row-start : specifies on which row to start displaying the item.
grid-row-end : specifies on which row-line to stop displaying the item, or how many rows to span.
example: grid-row property
Item1 will start on row 1, and span 2 rows:
<div>
<p>Item1 will start on row 1, and span 2 rows:</p>
<div class="grid-container-k">
<div class="item1-k">1</div>
<div class="item2-k">2</div>
<div class="item3-k">3</div>
<div class="item4-k">4</div>
<div class="item5-k">5</div>
<div class="item6-k">6</div>
<div class="item7-k">7</div>
</div>
</div>
<style>
.grid-container-k {display: grid;grid-template-columns: auto auto auto auto; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-k > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
.item1-k{grid-row: 1 /span 2;}
</style>
- defines how many rows an item will span, or on which row-line the item will end.
Property values:
auto : default value. The item will span one row
span n : specifies the number of rows the item will span
row-line : specifies on which row to end the display of the item
example: grid-row-end property
Item1 will span 3 rows:
<div>
<p>Item1 will span 3 rows:</p>
<div class="grid-container-l">
<div class="item1-l">1</div>
<div class="item2-l">2</div>
<div class="item3-l">3</div>
<div class="item4-l">4</div>
<div class="item5-l">5</div>
<div class="item6-l">6</div>
<div class="item7-l">7</div>
</div>
</div>
<style>
.grid-container-l {display: grid;grid-template-columns: auto auto auto; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-l > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
.item1-l{grid-row-end: span 3;}
</style>
- defines the size of the gap between the rows in a grid layout.: This property was renamed to row-gap in CSS3.
Property values:
grid-row-gap : any legal length value, like px or %. 0 is the default value.
example: grid property
This grid has a 4vw gap between rows (and a 1vw gap between columns):
<div>
<p>This grid has a 4vw gap between rows (and a 1vw gap between columns):</p>
<div class="grid-container-m">
<div class="item1-m">1</div>
<div class="item2-m">2</div>
<div class="item3-m">3</div>
<div class="item4-m">4</div>
<div class="item5-m">5</div>
<div class="item6-m">6</div>
<div class="item7-m">7</div>
<div class="item8-m">8</div>
<div class="item9-m">9</div>
<div class="item10-m">10</div>
<div class="item11-m">11</div>
<div class="item12-m">12</div>
</div>
</div>
<style>
.grid-container-m {display: grid;grid-template-columns: auto auto auto auto;
grid-column-gap: 1vw; grid-row-gap: 4vw; background-color: #2196F3; padding: 1vw;}
.grid-container-m > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
</style>
- defines on which row-line the item will start.
Property values:
auto : default value. The item will be placed following the flow
row-line : specifies on which row to start the display of the item
example: grid property
Item1 will start on row 2:
<div>
<p>Item1 will start on row 2:</p>
<div class="grid-container-n">
<div class="item1-n">1</div>
<div class="item2-n">2</div>
<div class="item3-n">3</div>
<div class="item4-n">4</div>
<div class="item5-n">5</div>
<div class="item6-n">6</div>
</div>
</div>
<style>
.grid-container-n {display: grid;grid-template-columns: auto auto auto auto; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-n > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
.item1-n{grid-row-start: 2;}
</style>
- is a shorthand property for the following properties: "grid-template-rows" , "grid-template-columns", "grid-template-areas".
Property values:
none : default value. No specific sizing of the columns or rows
grid-template-rows / grid-tremplate-colums : specifies the size(s) of the columns and rows
grid-temaple-areas : specifies the grid layout using named items
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
example: grid property
This grid layout has three columns, and the first row is 10vw high:
<div>
<p>This grid layout has three columns, and the first row is 10vw high:</p>
<div class="grid-container-o">
<div class="item1-o">1</div>
<div class="item2-o">2</div>
<div class="item3-o">3</div>
<div class="item4-o">4</div>
<div class="item5-o">5</div>
<div class="item6-o">6</div>
</div>
</div>
<style>
.grid-container-o {display: grid;grid-template: 10vw / auto auto auto; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-o > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
</style>
- specifies areas within the grid layout. You can name grid items by using the "grid-area" property, and then reference to the name in the grid-template-areas property.
Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.
Property values:
none : default value. No named grid areas
itemnames : a sequence that specifies how each columns and row should display
example: grid property
Item1-p is called "myArea" and will take up the place of two columns (out of five):
<div>
<p>Item1-p is called "myArea" and will take up the place of two columns (out of five):</p>
<div class="grid-container-p">
<div class="item1-p">1</div>
<div class="item2-p">2</div>
<div class="item3-p">3</div>
<div class="item4-p">4</div>
<div class="item5-p">5</div>
<div class="item6-p">6</div>
<div class="item7-p">7</div>
<div class="item8-p">8</div>
<div class="item9-p">9</div>
</div>
</div>
<style>
.item1-p{grid-area: myArea;}
.grid-container-p {display: grid; grid-template-areas: "myArea myArea . . .";
grid-gap: 1vw; background-color: #2196F3; padding: 1vw;}
.grid-container-p > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
</style>
- specifies the number (and the widths) of columns in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.
Property values:
none : default value. Columns are created if needed
auto : the size of the columns is determined by the size of the container and on the size of the content of the items in the column
max-content : sets the size of each column to depend on the largest item in the column
min-content : sets the size of each column to depend on the smallest item in the column
length : sets the size of the columns, by using a legal length value.
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: grid-template-columns property
This grid layout has four columns:
<div>
<p>This grid layout has four columns:</p>
<div class="grid-container-q">
<div class="item1-q">1</div>
<div class="item2-q">2</div>
<div class="item3-q">3</div>
<div class="item4-q">4</div>
<div class="item5-q">5</div>
<div class="item6-q">6</div>
<div class="item7-q">7</div>
<div class="item8-q">8</div>
</div>
</div>
<style>
.grid-container-q {display: grid; grid-template-columns: auto auto auto auto; grid-gap: 1vw;
background-color: #2196F3; padding: 1vw;}
.grid-container-q > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
</style>
- specifies the number (and the widths) of rows in a grid layout. The values are a space separated list, where each value specifies the height of the respective row.
Property values:
none : default value. Rows are created if needed
auto : the size of the rows is determined by the size of the container and on the size of the content of the items in the row
max-content : sets the size of each row to depend on the largest item in the row
min-content : sets the size of each row to depend on the smallest item in the row
length : sets the size of the row, by using a legal length value.
initial : sets this property to its default value
inherit : inherits this property from its parent element.
example: grid-template-rows property
The first row in this grid is 5vw high, and the second row is 10vw high:
<div>
<p>The first row in this grid is 5vw high, and the second row is 10vw high:</p>
<div class="grid-container-r">
<div class="item1-r">1</div>
<div class="item2-r">2</div>
<div class="item3-r">3</div>
<div class="item4-r">4</div>
<div class="item5-r">5</div>
<div class="item6-r">6</div>
<div class="item7-r">7</div>
<div class="item8-r">8</div>
</div>
</div>
<style>
.grid-container-r {display: grid; grid-template-columns: auto auto auto auto;
grid-template-rows: 5vw 10vw; grid-gap: 1vw; background-color: #2196F3; padding: 1vw;}
.grid-container-r > div {background-color: rgba(255, 255, 255, 0.8); text-align: center;
padding: 2vw 0; font-size: 2vw; }
</style>