Несколько столбцов
Блок новостей занимает одну ячейку третьей строки, а соседняя ячейка пуста. Он смотрелся бы гораздо лучше на всю ширину сетки.
В курсе CSS вы растягивали элемент сетки на несколько столбцов с помощью grid-column: span 2. В Tailwind для этого есть такие классы:
| Класс | CSS | Элемент... |
|---|---|---|
col-span-2 | grid-column: span 2 / span 2; | шириной в два столбца |
col-span-full | grid-column: 1 / -1; | шириной во все столбцы |
row-span-2 | grid-row: span 2 / span 2; | высотой в две строки |
span 2 / span 2 означает то же, что и span 2: просто Tailwind записывает это и для начала, и для конца элемента.
Элемент может также начинаться или заканчиваться на определённой линии сетки: col-start-2 — это grid-column-start: 2, а col-end-4 — grid-column-end: 4. Линии нумеруются с 1, как вы знаете.
Задание
- 1
Добавьте блоку новостей (оранжевому
divпод карточками) классcol-span-2. Теперь он занимает оба столбца.