Ще одним способом організації вмісту вебсайту є використання сіток. Tailwind CSS надає потужні утиліти для створення сіткових макетів. У цьому розділі пояснюється, як використовувати сіткові утиліти Tailwind CSS для створення контейнерів та елементів сітки.

Контейнер сітки

Щоб визначити контейнер сітки, використовуйте клас grid. Ви можете керувати кількістю стовпців, відстанями між рядками та стовпцями тощо.

Пояснення

1. grid: Встановлює відображення елемента як сітку;
2. grid-cols-3: Визначає сітку з трьома стовпцями;
3. gap-4: Додає проміжок у 1rem (16px) між елементами сітки.

Сітка з рядками

grid-rows-2: Визначає сітку з двома рядками.

Керування розмірами стовпців і рядків

Можна керувати розмірами стовпців і рядків за допомогою класів grid-cols-{n} і grid-rows-{n}, де {n} — це кількість стовпців або рядків. Також можна використовувати дробові одиниці (fr), відсотки та інші одиниці вимірювання.

Пояснення

1. col-span-2: Охоплює елемент на дві колонки;
2. col-span-3: Охоплює елемент на всі три колонки.

Фіксовані та гнучкі розміри

Пояснення

1. w-1/2: Встановлює ширину елемента на 50% від ширини контейнера;
2. w-full: Встановлює ширину елемента на 100% від ширини контейнера;
3. w-1/3: Встановлює ширину елемента на 33.33% від ширини контейнера.

Шаблони колонок і рядків сітки

Ви можете використовувати спеціальні утилітарні класи для визначення кількості та ширини колонок і рядків у вашому макеті сітки.

Користувацькі колонки сітки

Пояснення

1. grid-cols-4: Визначає сітку з чотирма стовпцями;
2. col-span-1: Охоплює елементом один стовпець;
3. col-span-2: Охоплює елементом два стовпці.

Користувацькі рядки сітки

Пояснення

1. grid-rows-3: Визначає сітку з трьома рядками;
2. row-span-2: Розтягує елемент на два рядки;
3. row-span-1: Розтягує елемент на один рядок.

Примітка

Будь ласка, зверніться до офіційної документації для отримання додаткової інформації про Tailwind CSS Grid.