CSS Grid

Що таке CSS Grid?

CSS Grid — це система сітки, яка дозволяє легко створювати розмітку сторінки з рядками та колонками. Елементи розташовуються всередині комірок сітки.

display: grid

Щоб перетворити контейнер у сітку, потрібно вказати display: grid;.

1

2

grid-template-columns

Ця властивість визначає, скільки колонок у сітці та якої ширини вони будуть.

grid-template-columns: 1fr 1fr;

1

2

3

4

5

6

grid-template-columns: 100px 250px 100px;

1

2

3

4

5

6

grid-template-columns: repeat(3, 1fr);

A

B

C

D

E

F

grid-template-columns: 100px auto 2fr;

100px

auto

2fr

grid-template-rows

Ця властивість встановлює висоту рядків.

grid-template-rows: 50px 100px;

висота рядка 50px

висота рядка 100px

gap

gap встановлює відстань між усіма рядками і стовпцями.

gap: 20px;

1

2

3

4

5

6

row-gap встановлює відстань тільки між рядками.

row-gap: 50px;

A

B

C

D

E

F

column-gap встановлює відстань тільки між стовпцями.

column-gap: 50px;

X

Y

Z

W

Q

R

grid-area

Можна дати кожному елементу ім’я області, а потім розташувати їх у шаблоні.

grid-template-areas: \"header header\" \"sidebar main\"

main

grid-column-start, grid-column-end, grid-row-start, grid-row-end

Ці властивості дозволяють вказати, з якої колонки або рядка починається/закінчується елемент.

grid-column-start: 1; grid-column-end: 4;

колонки 1-4

B

C

D

E

F

G

K

L

M

grid-row-start: 1; grid-row-end: 4;

рядки 1-4

1

2

3

4

5

6