wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

7. WB March RU

Total questions: 20

Worksheet time: 10mins

Name
Class
Date
1.

Как работает свойство grid-area?

a)

Устанавливает размеры для всех элементов сетки

b)

Определяет шаблон на основе названий областей

c)

Устанавливает размеры элемента по горизонтали

d)

Устанавливает размеры и размещение элемента в колонке и в ряду

2.

Сколько колонок займет .item9?

a)

0

b)

1

c)

2

d)

3

3.

Какова высота элемента с классом item9?

a)

300px

b)

150px

c)

500px

d)

400px

4.

Какова высота элемента с классом item3?

a)

150px

b)

100px

c)

300px

d)

400px

5.

Будет ли ошибкой указать такое правило grid-row: 1 / span 2;?

a)

Да

b)

Нет

6.

Какое значение свойства display позволяет выравнивать внутренний контент по сетке?

a)

table

b)

block

c)

flex

d)

grid

7.

Какая свойство задает количество и размеры столбцов явной сетки?

a)

grid-auto-row

b)

grid-auto-columns

c)

grid-template-columns

d)

grid-template-row

8.

Что делает функция minmax()?

a)

Указывает минимальную и максимальную ширину, которую может занять трек.

b)

Выбирает минимальное значение из двух вариантов

c)

Выбирает максимальное значение из двух вариантов

d)

Задает два варианта ширины трека

9.

Сколько колонок создаст такое правило - grid-template-columns: repeat(auto-fill, 150px); ?

a)

1

b)

Количество столбцов будет зависеть от ширины окна браузера

c)

Не будет создано колонок, потому что не указано количество

d)

бесконечность

10.

В чем разница между значениями auto-fill и auto-fit?

a)

auto-fill - создает неявные сетки; auto-fit - не создает.

b)

auto-fit - создает неявные сетки; auto-fill - не создает.

11.

Что задает свойство grid-row-start?

a)

определяет начальную позицию элемента сетки в столбце

b)

Задает количество рядов в сетке

c)

Такого свойства не существует

d)

определяет начальную позицию элемента сетки в ряду

12.

Какое свойство используется для задания положения и размера ячейки в колонке?

a)

grid-column

b)

grid-row

c)

grid-template-columns

d)

grid-column-position

13.

Сколько ТРЕКОВ в сетке на картинке?

a)

1

b)

2

c)

4

d)

5

14.

Какое CSS правило применено к 1 элементу сетки?

a)

grid-column: 1 / 2;

b)

grid-column: 1 / 3;

c)

grid-column: 1 / 4;

d)

grid-column: 1 / 5;

15.
Правило grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); задано без помилок?
a)
Так
b)
Ні
16.

Какой псевдокласс может выбирать элементы по индексам, находящимся внутри одного родительского элемента?

a)

:item(n)

b)

:nth-child(n)

c)

:hover(n)

d)

:index(n)

17.

С помощью какого свойства можно изменить направление потока в Grid?

a)

flex-direction

b)

grid-direction

c)

justify-content

d)

grid-auto-flow

18.

Какое значение свойства grid-auto-flow позволяет заполнять свободные места сетки элементами, которые подходят по размерам?

a)

dense

b)

row

c)

column

d)

reverse

19.

Какое значение свойства grid-column или grid-row объединяет несколько ячеек между собой?

a)

span

b)

glue

c)

connect

d)

accept

20.

Какое CSS правило применено к 6 элементу сетки?

a)

grid-column: span 3;

b)

grid-column: span 2;

c)

grid-row: span 3;

d)

grid-row: span 4;