Как указать колличество колонок grid

Question 1

Как указать колличество колонок grid

Answer 1

grid-template-columns:;

Question 2

Как указать колличество строчек grid

Answer 2

grid-template-rows:;

Question 3

grid-template-columns:;

Answer 3

Как указать колличество колонок grid

Question 4

grid-template-rows:;

Answer 4

Как указать колличество строчек grid

Question 5

grid-template-columns: 30% 70%;

Answer 5

Выведет что колонка первая шириной 30% а вторая 70% шириной

Question 6

1fr 2fr что это

Answer 6

Фракции которые занимают какую либо часть контейнера

Question 7

repeat() где используется?

Answer 7

Используется в тех случаях когда нужно множество колонок допустим repeat (1fr, 12) создаст 12 равнозначных колонок ну или столбцов

Question 8

grid-template-columns: repeat(10, 1fr);
что сделает?

Answer 8

Оно повторит 10 колонок равнозначных

Question 9

А что будет если в repeat добавить 2 размерности,grid-template-columns: repeat(10, 1fr, 2fr)

Answer 9

Тогда поочередно колонки будут по 1fr и 2fr занимать

Question 10

grid-template-rows: 100px 200px 300px;

Answer 10

Сделает сначала первая строка 100 пикселей вторая 200 третья 300

Question 11

Сделает сначала первая строка 100 пикселей вторая 200 третья 300

Answer 11

grid-template-rows: 100px 200px 300px;

Question 12

grid-template-rows: repeat(6, 200px);

Answer 12

Повторить 6 раз по 200 пикселей строк

Question 13

Повторить 6 раз по 200 пикселей строк

Answer 13

grid-template-rows: repeat(6, 200px);

Question 14

grid-gap: 5px; что делает

Answer 14

Отступы между колонками и столбцами 5px а так же можно сделать 5px 0px чтобы только между допустим столбцами или только между колонками отступы или же варьировать их

Question 15

grid-auto-rows:;

Answer 15

Делает для строк высоту только тогда когда они явно не заданы

Question 16

overflow: scroll;

Answer 16

Если контент не вмещается ему дается скролл

Question 17

grid-auto-rows: minmax(100px, auto)

Answer 17

От 100 пикселей высота до бесконечности автоматически

Question 18

Выравнивание по оси X элементов внутри контейнера

Answer 18

justify-content: start;

Question 19

justify-content: start;

Answer 19

Выравнивание по оси X элементов внутри контейнера

Question 20

align-content: end;

Answer 20

Выравнивание по оси Y элементов внутри контейнера

Question 21

Выравнивание по оси Y элементов внутри контейнера

Answer 21

align-content: end;

Question 22

Выравнивание по оси Y элемента конкретного

Answer 22

align-self: start;

Question 23

Выравнивание по оси X элемента конкретного

Answer 23

justify-self: start;

Question 24

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

Answer 24

Значит что элемент должен начинаться на 1 колонке заканчиваться на 3й

Question 25

Значит что элемент должен начинаться на 1 колонке заканчиваться на 3й

Answer 25

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

Question 26

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

Answer 26

Значит элемент начинается на 2 строке заканчивается на 5

Question 27

Значит элемент начинается на 2 строке заканчивается на 5

Answer 27

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

Question 28

grid-column: 1/2;

Answer 28

С какой по какую колонку должен распологаться элемент

Question 29

grid-row: 1/2;

Answer 29

С какой по какую строку должен распологаться элемент

Question 30

grid-template-areas: ‘header header’, ‘content footer’

Answer 30

Как элементы указанные с помощью grid-area: header; будут занимать место

Question 31

grid-area: name;

Answer 31

Название элемента дляgrid-template-areas