CSS properties - grid-related

revision:

Content

grid property grid-area property grid-auto-columns property grid-auto-flow property grid-auto-rows property grid-column property grid-column-end property grid-column-gap property grid-column-start property grid-gap property grid-row property grid-row-end property grid-row-gap property grid-row-start property grid-template property grid-template-areas property grid-template-columns property grid-template-rows property

grid property

top

- is a shorthand property for: "grid-template-rows". "grid-template-columns", "grid-template-areas", "grid-auto-rows" , "grid-auto-columns", "grid-auto-flow".

CSS syntax : grid: none |grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit;

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.

JavaScript syntax: object.style.gird ="250px / auto auto auto"

example: grid property
1
2
3
4
5
6
code: 
                    <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>

grid-area property

top

- 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.

CSS syntax : grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

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

JavaScript syntax: object.style.gridArea="1 / 2 /span 2 / span 3"

example: grid-area property
1
2
3
4
5
6
7
code: 
                    <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
Header
Menu
Main
Right
Left
Aside
Footer
code: 
                    <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>

grid-auto-columns property

top

- sets a size for the columns in a grid container. This property affects only columns with the size not set.

CSS syntax : grid-auto-columns: auto | max-content | min-content | length;

Property values:

auto : default value. The size of the columns is determined by the size of the container

fit-content() :

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

JavaScript syntax: object.style.gridAutoColumns ="120px"

example: grid-auto-columns property
1
2
3
4
5
6
code: 
                    <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>

grid-auto-flow property

top

- controls how auto-placed items get inserted in the grid.

CSS syntax : grid-auto-flow: row | column | dense | row dense | column dense;

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

JavaScript syntax: object.style.gridAutoFlow="row dense"

example: grid-auto-flow property

Insert items column by column:

1
2
3
4

Insert items row by row:

1
2
3
4
code: 
                    <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>

grid-auto-rows property

top

- sets a size for the rows in a grid container. This property affects only rows with the size not set.

CSS syntax :

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.

JavaScript syntax: object.style.gridAutoRows="6vw"

example: grid-auto-rows property

Set the size to 10vw per row:

1
2
3
4
5
6
code: 
                    <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>

grid-column property

top

- 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".

CSS syntax : grid-column: 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.

JavaScript syntax: object.style.gridColumn="2 /span 2"

example: grid-column property

Item1 will start on column 1, and span 2 columns:

1
2
3
4
5
6
7
code: 
                    <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>

grid-column-end property

top

- defines how many columns an item will span, or on which column-line the item will end.

CSS syntax : grid-column-end: auto | span n | column-line;

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

JavaScript syntax: object.style.gridColumnEnd="5"

example: grid-column-end property

Item1 will span 3 columns:

1
2
3
4
5
6
code: 
                    <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>

grid-column-gap property

top

- defines the size of the gap between the columns in a grid layout.: This property was renamed to column-gap in CSS3.

CSS syntax : grid-column-gap: length;

Property values:

grid-column-gap : any legal length value, like px or %. 0 is the default value.

JavaScript syntax: object.style.gridColumnGap="5vw"

example: grid-column-end property

This grid has a 4vw gap between columns (and a 1vw gap between rows):

1
2
3
4
5
6
7
8
9
10
11
12
code: 
                    <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>

grid-column-start property

top

- defines on which column-line the item will start.

CSS syntax : grid-column-start: auto | span n | column-line;

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

JavaScript syntax: object.style.gridColumnStart="3"

example: grid-column-gap property

Item1 will span 3 columns:

1
2
3
4
5
6
code: 
                    <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>

grid-gap property

top

- 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.

CSS syntax : grid-gap: grid-row-gap grid-column-gap;

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

JavaScript syntax: object.style.gridGap="5vw 10vw"

example: grid-column-start property

This grid has a 4vw gap between columns (and a 10px gap between rows):

1
2
3
4
5
6
7
8
9
10
11
12
code: 
                    <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>

grid-row property

top

- 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".

CSS syntax : grid-row: 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.

JavaScript syntax: object.style.gridRow="2 /span 2"

example: grid-row property

Item1 will start on row 1, and span 2 rows:

1
2
3
4
5
6
7
code: 
                    <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>

grid-row-end property

top

- defines how many rows an item will span, or on which row-line the item will end.

CSS syntax : grid-row-end: auto | span n | row-line;

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

JavaScript syntax: object.style.gridRowEnd="4"

example: grid-row-end property

Item1 will span 3 rows:

1
2
3
4
5
6
7
code: 
                    <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>

grid-row-gap property

top

- defines the size of the gap between the rows in a grid layout.: This property was renamed to row-gap in CSS3.

CSS syntax : grid-row-gap: length;

Property values:

grid-row-gap : any legal length value, like px or %. 0 is the default value.

JavaScript syntax: object.style.gridRowGap="5vw"

example: grid property

This grid has a 4vw gap between rows (and a 1vw gap between columns):

1
2
3
4
5
6
7
8
9
10
11
12
code: 
                    <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>

grid-row-start property

top

- defines on which row-line the item will start.

CSS syntax : grid-row-start: auto | column-line;

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

JavaScript syntax: object.style.gridRowStart="3"

example: grid property

Item1 will start on row 2:

1
2
3
4
5
6
code: 
                    <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>

grid-template property

top

- is a shorthand property for the following properties: "grid-template-rows" , "grid-template-columns", "grid-template-areas".

CSS syntax : grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit;

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.

JavaScript syntax: object.style.gridTemplate="250px / auto auto"

example: grid property

This grid layout has three columns, and the first row is 10vw high:

1
2
3
4
5
6
code: 
                    <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>

grid-template-areas property

top

- 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.

CSS syntax : grid-template-areas: none | itemnames;

Property values:

none : default value. No named grid areas

itemnames : a sequence that specifies how each columns and row should display

JavaScript syntax : object.style.gridTemplateAreas="...myArea myArea"

example: grid property

Item1-p is called "myArea" and will take up the place of two columns (out of five):

1
2
3
4
5
6
7
8
9
code: 
                    <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>

grid-template-columns property

top

- 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.

CSS syntax : grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;

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.

JavaScript syntax : object.style.gridTemplateColumns="5vw 5vw 10vw"

example: grid-template-columns property

This grid layout has four columns:

1
2
3
4
5
6
7
8
code: 
                    <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>

grid-template-rows property

top

- 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.

CSS syntax : grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;

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.

JavaScript syntax : object.style.gridTemplateRows="5vw 10vw"

example: grid-template-rows property

The first row in this grid is 5vw high, and the second row is 10vw high:

1
2
3
4
5
6
7
8
code: 
                    <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>