Grid

Классы для управления grid-сетками.

Контейнер

Класс	Описание
.grid	Включает grid

Колонки

Класс	Описание
.grid-columns--1fr-1fr	Две равные колонки
.grid-columns--1fr-2fr	Колонки 1:2
.grid-columns--1fr-3fr	Колонки 1:3
.grid-columns--2fr-1fr	Колонки 2:1
.grid-columns--3-32	Фиксированные колонки

Примеры

Просмотр

Колонка 1

Колонка 2

Код

<div class="grid grid-columns--1fr-1fr gap-4">
  <div class="p-4 bg-blue-100 rounded">Колонка 1</div>
  <div class="p-4 bg-green-100 rounded">Колонка 2</div>
</div>

<div class="grid grid-columns--1fr-1fr gap-4">
  <div>Колонка 1</div>
  <div>Колонка 2</div>
</div>

Просмотр

1/3

2/3

Код

<div class="grid grid-columns--1fr-2fr gap-4">
  <div class="p-4 bg-blue-100 rounded">1/3</div>
  <div class="p-4 bg-green-100 rounded">2/3</div>
</div>

<div class="grid grid-columns--1fr-2fr gap-4">
  <div>1/3</div>
  <div>2/3</div>
</div>