Grid layout

визначає кількість колонок та висоту яку вони займають.
Розміри можуть бути задані в будь-яких дозволених одиницях вимірювання, а також в нових одиницях fraction (fr)

Columns & rows

Fractions (fr)- відносна одиниця вимірювання яка застосовується для визначення ширини блоку. Для одного блоку 1rf буде дорівнювати 100% ширини. Для двох блоків по 1fr, це буде по 50% ширини. Для трьох блоків , значення яких , наприклад, буде 1fr 2fr 1fr - це буде (25%,50%,25%).
Ми чітко бачимо, що це - просто частки. Загальна кількість часток в останньому прикладі - 4. Відповідно 1/4 - 25%, 2/4 - 50%, 1/4 - 25%;

(minvalue та maxvalue - значення у px,% і тд) можливо задати мінімальну та максимальну висоту колонки у випадку якщо в комірці є багато тексту.
grid-auto-columns - виконує ту саму функцію, але впливає на ширину колонки.

вже існуючі розміри колонок.

grid-gap

grid-row-gap - дозволяє надавати відступи між рядками

grid-gap - композитна характеристика, дозволяє одночасно задати відступи між колонками та рядками

та 10 колонок. та в середині є блок із класом box

.target {
width: 800px;
height: 800px;
background: silver;
display: grid;
grid-template-columns:repeat(10, 1fr);
grid-template-rows:repeat(10, 1fr);
}
.box{
background: #000;
}

блок, а за допомоги властивості grid-column-end - вказати де закінчується блок.

Важливо пам’ятати,що значення start & end (2 та 4 в прикладі) характеризують лнії grid системи, а не номери колонок чи рядків

grid-row-start: 1;
grid-row-end: 5;
}

2/10;
Де перша цирфа - значення start , друга - end

1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"a a"
"b c"
}
.a {
background: #000;
grid-area: a;
}
.b {
background: red;
grid-area: b;
}
.c {
background: cornflowerblue;
grid-area: c;
}