Генератор CSS Grid

Создайте макет сетки CSS визуально — установите столбцы, строки, зазоры и размеры трека, а затем скопируйте сгенерированный CSS.

How to use CSS Grid Generator

1. Установите количество столбцов и строк для сетки.
2. Выберите единицу измерения трека, такую как fr, px, auto или minmax.
3. Корректируйте столбец-разрыв и ряд-разрыв, а также пункты обоснования и пункты выравнивания.
4. Скопируйте сгенерированную сетку CSS и вставьте ее в свой проект.

Что такое имя?

FAQ

Что означает единица fr в размере трека сетки?

Блок fr представляет собой часть свободного пространства в контейнере сетки. Использование повтора (3, 1fr) создает три равноширотных столбца, которые разделяют доступное пространство, расширяясь и уменьшаясь в зависимости от размера контейнера.

Когда следует использовать minmax() вместо fr?

Используйте minmax(), когда дорожкам нужны пол и потолок, такие как minmax(80px, 1fr), который держит колонку шириной не менее 80px, но позволяет ей расти, чтобы заполнить пространство. Обычный fr не имеет минимума и может уменьшаться ниже читаемой ширины на небольших экранах.

Related tools

• Flexbox Generator
• CSS Gradient Generator
• Border Radius Generator
• Box Shadow Generator