Фракции в CSS Grid

Фракция (fr) — это специальная единица измерения в CSS Grid, которая позволяет создавать гибкие и адаптивные макеты. Фракция представляет собой долю от доступного пространства.

Как работают фракции:

1. Равномерное распределение

   • Если задать три колонки с шириной 1fr каждая, то доступное пространство разделится на три равные части.

   • Пример:

     grid-template-columns: 1fr 1fr 1fr;

     В этом случае каждая колонка займёт по одной трети доступной ширины.

2. Неравномерное распределение

   • Если задать колонки с разными фракциями, пространство будет распределено пропорционально.

   • Пример:

     grid-template-columns: 2fr 1fr 1fr;

     Здесь доступная ширина разделится на четыре части:

     • Первая колонка займёт две части.

     • Вторая и третья колонки займут по одной части.

3. Комбинация с фиксированными размерами

   • Фракции можно комбинировать с фиксированными значениями (например, пикселями).

   • Пример:

     grid-template-columns: 200px 1fr 1fr;

     В этом случае:

     • Первая колонка всегда будет занимать 200 пикселей.

     • Оставшееся пространство разделится поровну между второй и третьей колонками.

Преимущества фракций

• Адаптивность: Ширина колонок автоматически пересчитывается при изменении размера экрана.

• Гибкость: Позволяет легко создавать сложные макеты, комбинируя фракции с другими единицами измерения.