В течение многих лет мой инстинкт, когда дизайн требовал реального двухмерного макета, заключался в том, чтобы достичь стопки вложенных гибких контейнеров. ряд карт внутри столбца внутри другого ряда, каждая из которых изгибается, каждая борется с другими за пространство. Это сработало, в том смысле, что пиксели в конечном итоге приземлились там, где я хотел, но это никогда не был правильный инструмент, и каждый раз, когда мне приходилось менять дизайн, я платил за ярлык. CSS Grid был построен именно для этого, и в тот день, когда я перестал избегать его, мой код макета стал короче, и моя наценка стала более плоской.
Что меня слишком долго держало подальше от сетки, так это синтаксис. grid-template-columns: repeat(3, minmax(0, 1fr)) не является фразой, которая скатывается с пальцев, и взаимосвязь между треками, которые вы объявляете, и появляющимися ящиками не очевидна, пока вы не увидели, как это происходит несколько десятков раз. этот разрыв между & quot;Я знаю, что я хочу & quot; и & quot;Я знаю свойство, которое производит it & quot; это именно то, что закрывает генератор.
выше Генератор сетки CSS позволяет вам установить количество столбцов и строк, выбрать размер для каждой оси, набрать пробелы и отрегулировать выравнивание, пока перед вами воспроизводится предварительный просмотр в реальном времени. Точный CSS, который создает то, что вы видите, находится в поле готовности к копированию под ним. Он превращает сетку из характеристики, которую вы должны запомнить, в макет, который вы создаете, щелкнув.
TL;DR: CSS Grid - это двухмерная модель макета, которая одновременно управляет строками и столбцами. Контейнер пропускает его
grid-template-columns,grid-template-rows,gap, и четыре оправдывают и выравнивают свойства. этот генератор раскрывает все из них, показывает предварительный просмотр в реальном времени и излучает чистый CSS, который используетrepeat()и тотfrединица. поскольку предварительный просмотр отображается с теми же объявлениями, которые он выводит, то, что вы видите, - это именно то, что вы вставляете. Он полностью работает в вашем браузере без регистрации.
Какую проблему решает генератор сетки CSS?
Сложность с CSS Grid не в том, что она сложна, Это то, что она абстрактна, Вы описываете структуру ("три равных столбца с небольшим пространством между ними") и браузер вычисляет геометрию Это косвенность - это все дело, потому что именно она делает сетки отзывчивыми без единого медиа-запроса Но косвенность трудно удержать в голове Вы не можете смотреть repeat(3, 1fr) и мгновенно почувствуйте результат так, как вы можете посмотреть на визуализированную сетку коробок.
Генератор сворачивает цикл записи-сохранения-обновления в единое взаимодействие Вы меняете счетчик столбцов и три поля становятся четырьмя Вы переключаете трек из 1fr на auto и столбец щелкает на ширину своего содержимого Вы поднимаете разрыв и коробки дышат. после десяти минут этого дробная единица перестает быть символом, который вы переводите, и становится вещью, к которой вы достигаете специально И когда вы закончите исследовать, у вас не останется записки для расшифровки, потому что рабочая CSS уже написана для вас в поле вывода.
Есть второе, более тихое преимущество. построение макета путем манипуляции заставляет инструмент излучать только действительный, хорошо сформированный CSS. Вы не можете создать сломанный grid-template-columns значение нажатием, так что вывод всегда что-то вы можете вставить с уверенностью, Это надежность причина, по которой я держу набор визуальных CSS строителей близко, а не писать каждое правило с нуля.
Какие свойства контролирует контейнер сетки?
CSS Grid, как и flexbox, разделяет ответственность между контейнером и его элементами. Контейнер определяет дорожки и общую структуру, и именно здесь живет большинство решений по компоновке, поэтому именно здесь фокусируется генератор. вот что делает каждое свойство контейнера.
| Собственность | Что он контролирует | Общие ценности |
|---|---|---|
grid-template-columns |
Количество и размер столбцов | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
Количество и размер строк | repeat(2, auto), 100px, 1fr |
gap |
Пространство между дорожками | любой длины, например 16px или 20px 10px |
justify-items |
Положение предмета вдоль оси ряда | stretch, start, center, end |
align-items |
Положение предмета вдоль оси колонны | stretch, start, center, end |
justify-content |
Положение пути, когда решетка уже контейнера, на оси ряда | start, center, space-between |
align-content |
Положение дорожки на оси колонны | start, center, space-between |
Мысленная модель, которая делает эту палку, - это различие между дорожками и предметами. grid-template-columns а grid-template-rows определите пути, которые являются пустыми полосами сетки. Зазор находится между этими полосами. The justify-items а align-items затем свойства располагают каждый элемент внутри ячейки, которую он занимает, при этом justify-content а align-content расположите весь набор дорожек внутри контейнера, когда есть свободное место Генератор сохраняет эти два уровня визуально отдельными, чтобы вы могли почувствовать разницу между перемещением элемента внутри его ячейки и перемещением всей сетки внутри страницы.
Что означает единица fr?
выше fr единица - это часть CSS Grid, которая оплачивает всю модель, и ее стоит понимать, а не копировать. Один fr представляет одну долю свободного пространства в контейнере сетки после вычитания любых фиксированных размеров и зазоров Если вы пишете grid-template-columns: 1fr 1fr 1fr, контейнер's доступная ширина делится на три равные части.Записать 2fr 1fr 1fr и первый столбец занимает половину пространства, в то время как два других разделяют остальное Браузер пересчитывает эти дроби на каждом изменении размера, поэтому сетка на основе дробей является текучей без каких-либо точек останова.
Это поведение делает сетку выше процентов для большинства макетов. Набор 33.33% столбцы игнорируют зазор и переполнения, поскольку проценты плюс зазоры в сумме превышают контейнер. Дробные единицы рассчитываются после удаления зазоров, так что repeat(3, 1fr) с зазором всегда подходит Генератор по умолчанию 1fr столбцы именно по этой причине, и вы можете наблюдать, как три равных столбца удерживают свои пропорции, когда вы меняете разрыв. если вам нужен столбец, который вместо этого обнимает его содержимое, переключите его на auto, min-content, или max-content и сразу увидеть разницу.
Как сделать трехколонный макет?
Это одна из самых распространенных вещей, которые люди строят с помощью сетки, а рецепт состоит из двух строк. Установите контейнер в display: grid и отдай grid-template-columns: repeat(3, 1fr). Это дает три равных столбца, которые перетекают в столько строк, сколько необходимо содержимому. Добавить а gap и у вас есть макет карты.
В генераторе вы устанавливаете количество столбцов равным трем, оставляете размер включенным 1fr, а в предварительном просмотре выкладывается сетка из равных ячеек В поле вывода показано
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
Причина, по которой это стоит построить, щелкая, а не печатая, заключается в том, что реальные макеты никогда не бывают такими чистыми. вы захотите, чтобы боковая панель была фиксированной ширины, а содержимое - гибким, или первая строка была выше остальных. Каждое из этих изменений - это один элемент управления в генераторе и одно отредактированное значение на выходе, и вы видите эффект, прежде чем зафиксировать его в таблице стилей. если вы все еще решаете между сеткой и гибким подходом для конкретного блока, генератор flexbox является сопутствующим инструментом, и сравнение далее в этом руководстве объясняет, когда каждый из них побеждает.
Когда мне следует использовать сетку поверх флексбокса?
Это вопрос, который имеет наибольшее значение, когда вы знаете обе модели, и честный ответ заключается в том, что он зависит от количества измерений, которые имеет макет. Flexbox является одномерным. он размещает элементы вдоль одной оси, строки или столбца и оборачивает их, если вы спросите. Grid является двумерным. Он управляет строками и столбцами вместе, поэтому элемент может быть расположен как по своей строке, так и по столбцу одновременно.
Практическое правило, которое я использую, это. Если я выкладываю набор вещей в строке, навигационной панели, строке тегов, панели инструментов, стопке полей формы, то есть flexbox. Если я выкладываю структуру как со строками, так и со столбцами, которые должны совпадать друг с другом, оболочку страницы с заголовком, боковой панелью и областью контента или галерею, где каждая карта находится на чистой линии сетки, то есть сетке. эти два не являются соперниками; ячейка сетки часто содержит гибкий контейнер, а гибкий элемент часто представляет собой небольшую сетку. Вот разделение как таблица.
| Вопрос | Флексбокс | CSS-сетка |
|---|---|---|
| размеры | По одной оси | Ряды и столбцы вместе |
| лучше для | Панели инструментов, навигация, ряды элементов, теги упаковки | Макеты страниц, галереи, информационные панели, формы |
| Размер определяется | Содержимое, затем распространение | Шаблон трека, который вы объявляете |
| Выравнивание | justify-content, align-items |
Тот же плюс justify-items, align-content |
| Типичное использование | Внутри ячейки сетки | Общий кадр страницы или раздела |
Генератор делает этот бетон, потому что вы можете построить один и тот же визуальный результат в обе стороны и посмотреть, что производит правило чище Для галереи равных карт, сетка с repeat() это две линии и flex - это упаковочный контейнер с шириной на каждом ребенке. Для одного ряда, который должен разложить свои предметы по краям, согните с space-between это более короткий путь.
В чем разница между разрывом, обоснованным содержанием и выравнивающим содержанием?
Эти трое часто путаются, потому что все они имеют дело с пространством, но они действуют на разных уровнях.The gap свойство устанавливает фиксированный интервал между дорожками, и это тот, который вы будете использовать почти в каждой сетке. одно значение пробелы строки и столбцы равным образом; два значения устанавливают разрыв строки и разрыв столбца отдельно, в строке порядка затем столбец. генератор позволяет устанавливать два разрыва независимо и излучает сокращение только тогда, когда они различаются, поэтому выходные данные остаются настолько короткими, насколько позволяет ситуация.
justify-content а align-content, напротив, делать что-либо только тогда, когда дорожки сетки и #39;s меньше контейнера, оставляя свободное место для распределения Если все ваши столбцы имеют фиксированную ширину пикселей и они не заполняют контейнер, justify-content: center сосредоточит весь блок путей, и space-between подтолкнет их к краям. с fr столбцы, которые уже заполняют ширину, эти свойства не имеют ничего распределять и, кажется, ничего не делают, что является распространенным источником путаницы. генератор пропускает их из вывода, когда они остаются по умолчанию start, так что каждая строка в скопированном правиле является той, которая имеет видимый эффект, Та привычка излучать только значимые декларации - это та же самая, на которую я полагаюсь в генератор градиента и тот генератор коробчатых теней, потому что правило, полное безоговорочных линий, - это правило, которому нельзя доверять с первого взгляда.
Как генератор сохраняет честность предварительного просмотра?
Ловушка с любым визуальным конструктором заключается в том, что предварительный просмотр и экспортированный код могут раздвинуться. инструмент, который отображает свой предварительный просмотр в одну сторону и генерирует свой код в другую сторону, хуже, чем бесполезно, потому что он учит вас макету, который не будет воспроизводиться. Этот генератор избегает этого, создавая как предварительный просмотр, так и скопированный CSS из одного списка объявлений. Та же функция, которая решает, какие свойства излучать, - это та, которая стилизует поля предварительного просмотра, поэтому то, что вы видите, - это именно то, что вы вставляете. не существует отдельного пути рендеринга, который мог бы не согласиться.
Этот выбор дизайна является причиной использования результатов repeat() для любой оси с более чем одной дорожкой. одна дорожка излучается как голый размер, но две или более схлопываются в repeat(n, size), что и то, что человек напишет, и то, что сохраняет правило читабельным по мере роста счетчика. Это мелочь, но это разница между выводом, который вы бы отправили, и выводом, который вы бы переписали.
Построение адаптивной карточной сетки, шаг за шагом
Вот рабочий процесс, который я часто использую. начните с подсчета столбцов в три и размера на 1fr. Теперь у вас есть три равных, текучих столбца. Установите размер строки на auto таким образом, каждый ряд растет, чтобы соответствовать его самой высокой карты. Поднять разрыв к чему-то удобному, около двадцати пикселей для карт. это полная, отзывчивая сетка карты, и вывод четыре линии.
Чтобы он завершился сам по себе без медиа-запросов, следующим шагом в реальном проекте является обмен repeat(3, 1fr) в связи с repeat(auto-fill, minmax(240px, 1fr)), который говорит браузеру, чтобы соответствовать как можно больше столбцов 240-пиксель-минимум и растянуть их для заполнения. генератор дает вам фиксированный счет начальная точка; что один редактировать превращает его в самозавертывая сетку Понимание начальной точки, что делает редактирование очевидным, и это весь аргумент для изучения макета путем его построения, а не вставки. более широкий случай для сборки набора инструментов, которые работают таким образом, в части на Набор инструментов для веб-разработчиков, и привычки рабочего процесса, лежащие в его основе, находятся в Инструменты повышения производительности разработчик гид.
Какие браузеры поддерживают CSS Grid?
CSS Grid поддерживается в каждом текущем браузере и существует уже много лет. Свойства, которые излучает этот генератор, являются стандартными и непрефиксированными, поэтому выходные данные работают в Chrome, Firefox, Safari и Edge без префиксов поставщиков или резервных копий для любого браузера, на который сегодня реально нацелен проект.The gap свойство в контейнерах сетки, который был последним куском, который приземлился широко, также повсеместно поддерживается сейчас. это означает, что CSS, который вы копируете, готов к производству, как написано, что не всегда было верно в первые годы сетки и является одной из причин, по которой модель, наконец, является выбором по умолчанию, а не прогрессивным улучшением. Для основных правил спецификация CSS Grid Layout Module Level 1 от W3C является основным источником, и его стоит прочитать, как только генератор дал вам интуицию следовать ему.
Если вы создаете наряду с этим более широкий визуальный набор инструментов, генератор границы-радиуса а Генератор зажима CSS завершите сет, и Руководство по инструментам кодирования собирает те, к которым я обращаюсь больше всего.
Часто задаваемые вопросы
Что такое генератор сетки CSS?
Генератор сетки CSS - это визуальный инструмент, который создает код макета сетки CSS из выбранных вами настроек. Вы выбираете столбцы, строки, размеры дорожек, пробелы и выравнивание, и он выводит CSS шаблона сетки вместе с предварительным просмотром результата в реальном времени.
Что означает единица fr в CSS Grid?
Единица fr представляет собой долю свободного пространства в контейнере сетки. сетка-шаблон-столбцы: повтор (3, 1fr) создает три столбца, каждый из которых принимает равную долю доступной ширины и оплавления по мере изменения размера контейнера.
В чем разница между CSS Grid и flexbox?
CSS Grid - это двумерная модель, которая управляет строками и столбцами вместе, идеально подходящая для макетов страниц и сеток карт. Flexbox - это одномерный вариант, укладывающий элементы по одной оси, идеально подходящий для панелей инструментов и строк. Они дополняют друг друга и часто используются вместе.
Как сделать адаптивную сетку?
Используйте единицы fr, чтобы дорожки делились доступной шириной, и комбинируйте повтор () с minmax () и автозаполнение или автоподгонку для сеток, которые оборачиваются самостоятельно Этот генератор излучает повтор () с дорожками fr в качестве отправной точки, которую вы можете расширить.
Каково свойство пробела в CSS Grid?
зазор устанавливает расстояние между дорожками сетки. Одно значение поровну распределяет как строки, так и столбцы; два значения устанавливают зазор строк и зазор столбцов отдельно, в зазоре строк порядка, а затем в зазоре столбцов.
Безопасно ли использование CSS генерируемой сетки в производстве?
Да. CSS Grid поддерживается в каждом современном браузере, и инструмент излучает стандартные, непрефиксированные свойства. Вся обработка происходит в вашем браузере, поэтому ничего не загружается, и инструмент работает в автономном режиме после загрузки.
Работает ли CSS Grid Generator на мобильных устройствах?
Да. инструмент полностью отзывчив и работает в любом современном браузере на телефонах, планшетах и настольных компьютерах. сгенерированный CSS идентичен независимо от устройства, на котором вы его строите.
Этот генератор сетки CSS бесплатен?
Да. это совершенно бесплатно без регистрации, водяных знаков и ограничений использования. Сетка CSS, которую он производит, принадлежит вам для использования в любом проекте.
