CSS Grid Layout

#container { display: grid; align-items: start; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } 

#grid-container { display: grid; justify-items: start; } .grid-items { justify-self: end; } 

The grid items are positioned to the right (end) of the row.

.item { grid-area: nav; } .grid-container { display: grid; grid-template-areas: 'nav nav . .' 'nav nav . .'; } 

#container { display: grid; justify-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } 

.item1 { grid-area: 2 / 1 / span 2 / span 3; } 

grid-row-gap: length; 

Any legal length value, like px or %. 0 is the default value

CSS syntax:

• grid-row-start: auto|row-line;
• grid-row-end: auto|row-line|span n;

#Example

grid-row-start: 2; grid-row-end: span 2; 

.grid { display: grid; grid-template-columns: 100px minmax(100px, 500px) 100px; } 

#grid-container { display: inline-grid; } 

CSS syntax:

• grid-row: grid-row-start / grid-row-end;

#Example

.item { grid-row: 1 / span 2; } 

#grid-container { display: block; } 

/\*The distance between rows is 20px\*/ /\*The distance between columns is 10px\*/ #grid-container { display: grid; grid-gap: 20px 10px; } 

.grid { display: grid; width: 100px; grid-template-columns: 1fr 60px 1fr; } 

#grid-container { display: grid; width: 100px; grid-template-columns: 20px 20% 60%; }