Вёрстка «Battle city» на гридах

English version of this article can be found here.

Пришла в голову идея собрать лейаут игры из детства «Battle city» на гридах. Почему бы и нет? Вот что получилось:

Пример вёрстки живьём

Тут всё просто:

1. Создадим разметку 26 на 26 фракций с шириной и высотой по 16 пикселей.

.field {
  display: grid;
  grid-template-rows: repeat(26, 16px);
  grid-template-columns: repeat(26, 16px);
}

2. Нашпигуем разметку кучей дивов (да, демка лишена какого-либо смысла и поэтому доступности; кстати, гриды + доступность — неплохая идея для следующей статьи 🤔).

Поставим первый блок:

.wall-1 {
  grid-row: 3 / span 4;
  grid-column: 3 / span 2;
}

Этот блок начинается с третьей линии грида по горизонтали и вертикали; в ширину он занимает 2 полосы, а в высоту 4 полосы.

Поставим второй блок…

3. Нарисуем остальную сову:

Гриды на деле оказались довольно удобным инструментом для того, чтобы собирать что-то прямоугольное. Конечно, основная мощь гридов в адаптивности, и такую демку вполне можно было собрать хоть на флоатах. Но, в отличие от флоатов, гриды способны на больше.