Адаптивная сетка
Практические примеры
Урок на телефоне
Слепой печати учат на физической клавиатуре — большими пальцами этот навык не ставится. Здесь урок работает на повторение и замер: текст, ошибки и время те же, что на компьютере.
Чтобы урок засчитался
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
Отсчёт пойдёт с первого символа
Скорость
—
Ошибки
0
Время
00:00
Если клавиатура закрылась — коснитесь текста
Скорость
-
Ошибки
0
Время
0
.
g
r
i
d
{
d
i
s
p
l
a
y
:
g
r
i
d
;
g
r
i
d
-
t
e
m
p
l
a
t
e
-
c
o
l
u
m
n
s
:
r
e
p
e
a
t
(
a
u
t
o
-
f
i
t
,
m
i
n
m
a
x
(
2
5
0
p
x
,
1
f
r
)
)
;
}
ё
1
2
3
4
5
6
7
8
9
0
-
=
BackSpace
Tab
й
ц
у
к
е
н
г
ш
щ
з
х
ъ
\
Caps Lock
ф
ы
в
а
п
р
о
л
д
ж
э
Enter
Shift
я
ч
с
м
и
т
ь
б
ю
.
Shift
Ctrl
FN
Win
Alt
Alt
FN
Ctrl