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%;
}