Онлайн тест по CSS grid. Бесплатно и без регистрации

Можно ли данным свойством display: inline-grid сделать элемент grid-контейнером?

Да

Нет

Такого свойства нет в grid'ах

При помощи какой записи можно определить колонки в grid

grid-column-gap

grid-template-columns

columns

При помощи какой записи можно определить ряды в grid

grid-template-rows

grid-gap

grid-auto-flow

Можно ли использовать технологию Flex и Grid в одном проекте?

Нет

Да

Нет. Это может поломать верстку

О чем говорит данная запись? grid-template-columns: 1fr 1fr 1fr;

Это неправильно написанный код

Один трек, который будет фиксирован в размерах в соответствии с доступным пространством.

Три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.

Как можно сократить данную запись grid-column-gap: 10px;grid-row-gap: 10px;?

grid-column-row: 10px;

grid-gap: 10px;

column-row: 10px;

Может ли грид-элемент быть грид-контейнером?

Да

Нет

Может если только к нему применить технологию Flex

display: subgrid. Для чего служит данное свойство?

Она ничем не отличается display: grid

Это неверная запись

В спецификации гридов уровня 1 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.

Если к грид элементу применить z-index. Будет ли это работать?

Да

Нет

Нет. В гридах есть специальные для этого свойства

Что такое grid-area?

Это то свойство, которое принимает в качестве значения номера четырех грид-линий, определяющих расположение грид-области.

Это то свойство, которое принимает в качестве значения номера двух грид-линий, определяющих расположение грид-области.

Этого свойства нет

grid-template-columns: 100px 100px 100px; Как сократить данную запись?

grid-columns: 100px * 3

grid-template-columns: rep(100px, 3)

grid-template-columns: repeate(3, 100px)

Нужно сделать 3 колонки шириной 100px, 300px, 100px. Высота каждого ряда дожна быть 100px. Выберите правильный ответ

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

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

grid-template-columns: 1fr 3fr 1fr; grid-template-rows: 1fr

grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); О чем говорит данная строка?

Максимально заполнить строку. Колонки должны быть фиксированной ширины и не дожны переносится

Странная запись. Так в гридах делать нельзя.

Эти ключевые слова говорят браузеру перенести элемент на новую строку, если не хватает ширины, чтобы его вместить без перекрытия

grid-template-columns: 3rem 25% 100px 2fr. Является ли такая запись верной?

Нет. В гридах нельзя смешивать единицы измерений

В гридах нет такой единицы измерений как fr

Да, является верной

Сколько аргументов принимает функций minmax?

Это не функция. Она не принимает аргументы

2

3

Тест по CSS grid

Авторизация

Восстановление пароля