Tailwind: адаптивная сеткаTailwind CSS предлагает мощную и гибкую модель адаптивной сетки, позволяющую без особого труда создавать сложные макеты. С помощью классов-утилит можно создавать динамические дизайны, подходящие для экранов любых размеров.
Обращайте внимание на контрольные точки Tailwind:
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-blue-100 p-4">Item 1</div>
<div class="bg-blue-100 p-4">Item 2</div>
<div class="bg-blue-100 p-4">Item 3</div>
<div class="bg-blue-100 p-4">Item 4</div>
</div>
1.
grid
включает адаптивную сетку.
2.
grid-cols-1
создает один столбец на маленьких экранах.
3.
sm:grid-cols-2
создает два столбца экранах размером более 640 пикселей.
4.
lg:grid-cols-4
создает четыре столбца на экранах размером больше 1024 пикселей.
При необходимости распределяйте элементы сетки:
<div class="grid grid-cols-3 gap-4">
<div class="bg-green-100 p-4 col-span-2">Item 1 (Spans 2 columns)</div>
<div class="bg-green-100 p-4">Item 2</div>
<div class="bg-green-100 p-4 row-span-2">Item 3 (Spans 2 rows)</div>
<div class="bg-green-100 p-4">Item 4</div>
<div class="bg-green-100 p-4">Item 5</div>
</div>
1.
col-span-2
располагает элемент в двух столбцах.
2.
row-span-2
располагает элемент на двух строках.
Контролируйте поток:
<div class="grid grid-cols-3 grid-flow-row-dense gap-4">
<div class="bg-red-100 p-4">Item 1</div>
<div class="bg-red-100 p-4">Item 2</div>
<div class="bg-red-100 p-4">Item 3</div>
<div class="bg-red-100 p-4 col-span-2">Item 4 (Spans 2 columns)</div>
<div class="bg-red-100 p-4">Item 5</div>
</div>
grid-flow-row-dense
автоматически заполняет пустые ячейки сетки.
Выравнивайте элементы сетки:
<div class="grid grid-cols-2 gap-4 place-items-center">
<div class="bg-yellow-100 p-4">Centered Item 1</div>
<div class="bg-yellow-100 p-4">Centered Item 2</div>
</div>
place-items-center
центрирует элементы сетки по вертикали и горизонтали
#frontend #css #tailwind