Создавайте макеты CSS Flexbox и Grid визуально с помощью предварительного просмотра в режиме реального времени. Настраивайте свойства контейнеров и элементов, а затем копируйте готовый CSS-код.
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 8px;
/* all items use defaults */
CSS Flexbox и Grid - две основные системы верстки в современном CSS. Flexbox предназначен для одномерной верстки - строк или столбцов - и идеально подходит для панелей навигации, панелей инструментов и выравнивания компонентов. CSS Grid обрабатывает двумерные макеты, одновременно используя строки и столбцы, что делает его подходящим инструментом для макетов страниц, сетки карточек и сложных структур пользовательского интерфейса. Обе системы используют модель «контейнер/элемент»: свойства контейнера определяют общий макет, а свойства отдельных элементов контролируют то, как они вписываются в него.
Переключайтесь между режимами Flexbox и Grid с помощью вкладок в верхней части окна. Настройте свойства контейнера, чтобы задать общее направление макета, перенос текста, выравнивание и отступы. Выберите элемент, щелкнув по его пронумерованной плитке или напрямую в области предварительного просмотра, а затем настройте его отдельные свойства. Область предварительного просмотра обновляется в режиме реального времени по мере изменения значений. Скопируйте блоки «CSS контейнера» и «CSS элемента» и вставьте их в свой стилевой лист.
Вывод элементов CSS-групп переопределяется по классам элементов (.item-1, .item-2 и т. д.). Элементы, использующие только значения по умолчанию контейнера, не отображаются - в списке приводятся только переопределённые элементы. В режиме Grid для значений span столбцов и строк используется сокращённая запись span N. Шаблон repeat() для дорожек одинаковой ширины записывается как repeat(N, Xunit). Выберите единицу измерения (fr, px или %) в соответствии с требованиями вашего макета.