Как объединить Flexbox и CSS Grids для эффективных макетов

Опубликовано: 2023-02-12

Примечание редактора: этот гостевой пост был написан Эбби Фитцджеральд, инженером по пользовательскому программному обеспечению и веб-дизайнером, который любит искусство создания кода.

В прошлом плавающие свойства CSS были одним из основных методов размещения элементов на веб-сайте. И если вы когда-либо работали таким образом, вы знаете, что это не всегда идеально для сложных макетов. К счастью, в современную эпоху веб-дизайна выравнивание элементов стало намного проще благодаря Flexbox и CSS Grids.

Когда появился Flexbox, он значительно упростил выравнивание и с тех пор получил широкое распространение. Макеты CSS Grid также вызвали большой ажиотаж в сообществе веб-дизайнеров. Некоторое время назад мы рассмотрели, как создать базовый CSS Grid Layout. Хотя он не получил широкого распространения, браузеры начинают его поддерживать. Когда он будет полностью поддерживаться, это окажет большое влияние на дизайн. Поддержка браузеров постоянно увеличивается; не забудьте проверить Могу ли я использовать для получения самой последней информации.

Теперь вам может быть интересно, что дальше; в конце концов, Flexbox и CSS Grid Layouts, похоже, дают схожие результаты. Однако это не дебаты о Flexbox и Grid, а скорее об изучении того, как использовать их вместе. Чем больше я играл с Grid и Flexbox, я обнаружил, что вам не нужно выбирать только один или другой. В ближайшем будущем, когда макеты CSS Grid будут полностью поддерживаться браузерами, дизайнеры смогут использовать преимущества каждого из них и создавать наиболее эффективные и интересные дизайны.

Тестирование базовых макетов Flexbox и CSS Grid

Чтобы определить, что Flexbox или CSS Grid лучше подходят для вашего рабочего процесса разработки, создайте стандартный макет, который использует только один или другой, — это хороший способ увидеть, как они работают, и есть ли преимущества одного над другим. Мы начнем с очень простого и очень знакомого типа макета с заголовком, боковой панелью, основным содержимым и нижним колонтитулом. Такой простой макет — это быстрый способ разместить различные элементы.

И помните, вы никогда не должны вносить изменения в свой действующий сайт. Вместо этого попробуйте поэкспериментировать с Local — бесплатным локальным приложением для разработки WordPress. Загрузите его сегодня!

Как создать макет с помощью Flexbox

Недавно я затронул тему создания карточного макета Flexbox. В этом посте подробно рассказывается о том, как работает Flexbox, а также конкретная информация о CSS, поэтому, если вы новичок в Flexbox, он поможет вам ознакомиться с тем, как он работает.

макет по сетке маховика и скриншот макета flexbox

Для этого урока вот что мы будем строить:

Смотрите это на Codepen.

Для этого базового макета основные задачи Flexbox включают в себя:

  • Создать полноразмерный верхний и нижний колонтитулы
  • Разместите боковую панель рядом с областью основного контента
  • Правильный размер боковой панели и области основного контента
  • Расположение элементов навигации

Базовая структура HTML

 <div класс="контейнер">
        
    <заголовок>
        <навигация>
          <ул>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <кнопка></кнопка>
    </заголовок>
    <div класс="обертка">
        <aside class="боковая панель">
            <h3></h3>
        </в сторону>
        <раздел класс="основной">
            <h2></h2>
            <p></p>
        </раздел>
    </div><!-- /обертка -->
    <нижний колонтитул>
        <h3></h3>
        <p></p>
    </нижний колонтитул>
</дел><! -- /контейнер -->

Как использовать гибкий дисплей

Стиль заголовка

Начиная снаружи и работая внутри, добавляя display: flex; в контейнер — это первый шаг в любом макете Flexbox. Для flex-direction установлено значение column, поэтому все разделы будут располагаться друг под другом.

 .контейнер {
    дисплей: гибкий;
    flex-направление: столбец;
}

Создание полноразмерного заголовка было довольно автоматическим с display: flex; (заголовки по умолчанию являются элементом уровня блока). Из-за этого объявления это позволит легко размещать элементы навигации.

В навигации слева есть логотип и два пункта меню, а справа кнопка входа. Навигация находится в заголовке, поэтому, имея justify-content: space-between; навигация и кнопка будут разнесены автоматически.

Одна удобная вещь — это простота выравнивания текста. В навигации с align-items: baseline; , все элементы навигации выравниваются по базовой линии текста, поэтому они выглядят более единообразными.

макет с помощью сетки маховика и flexbox, выравнивание скриншота содержимого
 заголовок {
    отступ: 15 пикселей;
    нижняя граница: 40px;
    дисплей: гибкий;
    выравнивание содержимого: пробел между;
}
заголовок навигации ул {
    дисплей: гибкий;
    элементы выравнивания: базовый уровень;
    тип стиля списка: нет;
}

Оформление содержимого страницы

Далее идет боковая панель и основные области содержимого с оболочкой, которая включает в себя их две. Div с классом .wrapper также нуждается в display: flex; но направление изгиба отличается от указанного выше. Поскольку боковая панель и области контента расположены рядом друг с другом, а не в стопке, flex-direction

Далее идет боковая панель и основные области содержимого с оболочкой, которая включает в себя их две. Div с классом .wrapper также нуждается в отображении: flex; но направление изгиба отличается от указанного выше. Поскольку боковая панель и области содержимого расположены рядом друг с другом, а не в стопке, flex-direction — это row, что противоположно тому, что было сделано в контейнере выше.

 .обертка {
    дисплей: гибкий;
    flex-направление: строка;
}
макет по сетке маховика и скриншот областей содержимого flexbox

Размер основного раздела и боковой панели очень важен, так как здесь находится более заметная информация. Основной контент должен быть в три раза больше боковой панели, что довольно легко сделать с помощью Flexbox.

 .основной {
    гибкий: 3;
    поле справа: 60px;
}
.сайдбар {
   гибкий: 1;
}

Для этого фрагмента кода я использовал сокращение. Значения flex относятся к свойству flex-grow. Flex-grow является мощным, потому что это то, насколько элемент (ы) будет расти по сравнению с остальными гибкими элементами внутри того же контейнера.

В целом, Flexbox был довольно эффективен при создании этого простого макета. Было особенно полезно контролировать стиль элементов списка и расстояние между навигацией и кнопкой.

Как создать макет с помощью CSS Grid Layouts

Чтобы проверить эффективность, следующим шагом будет создание такого же базового макета с помощью CSS Grid. Все элементы страницы одинаковы и будут расположены так же, как в примере с Flexbox.

макет с помощью сетки маховика и скриншот макета сетки flexbox css

Смотрите это на Codepen.

Области шаблона сетки

Одна удобная вещь с CSS Grid — это возможность указывать области шаблона, что может сделать определение макетов очень интуитивно понятным. Используя этот подход, области в сетке могут быть названы и привязаны к элементам позиции. Для этого базового макета нам нужно назвать четыре элемента:

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

Базовая структура HTML

 <div класс="контейнер">
        
    <заголовок>
        <навигация>
          <ул>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <кнопка></кнопка>
    </заголовок>
  
    <aside class="боковая панель">
        <h3></h3>
        <ул>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </в сторону>
    <раздел класс="основной">
        <h2></h2>
        <p></p>
         <p> </p>
  </раздел>
    <нижний колонтитул>
        <h3></h3>
        <p></p>
    </нижний колонтитул>
</div>

Мы определим эти области в нашем сеточном контейнере по порядку, как будто рисуя их. Я также расставлю их для удобства чтения.

 области шаблона сетки:
        "заголовок заголовка"
        "основная боковая панель"
        "нижний колонтитул";

Обратите внимание, как боковая панель была указана перед основной? Их переключение также изменит порядок на странице. В настоящее время боковая панель находится слева, а основной контент — справа, но при необходимости вы можете легко изменить ее.

Следует отметить одну вещь: эти имена должны быть «подключены» к стилю. Просто потому, что были объявлены области grid-template-areas, мы не знаем, где на самом деле находится заголовок. В блоке заголовка grid-area: header; необходимо добавить.

 заголовок {
    область сетки: заголовок;
    отступ: 20px 0;
    отображение: сетка;
    столбцы сетки-шаблона: 1fr 1fr;
}

Структура HTML такая же, как и в примере с Flexbox, но CSS для создания макета сетки сильно отличается.

 .контейнер{
    максимальная ширина: 900 пикселей;
    цвет фона: #fff;
    поле: 0 авто;
    отступ: 0 60 пикселей;
    отображение: сетка;
    столбцы сетки-шаблона: 1fr 3fr;
    области шаблона сетки:
        "заголовок заголовка"
        "основная боковая панель"
        "нижний колонтитул";
    зазор сетки: 50px;
}

Чтобы начать работу с CSS Grid Layout, очень важно иметь display: grid; установить на контейнер. Столбцы grid-template-columns объявляются здесь, чтобы дать общую структуру страницы. Помните, как в примере с Flexbox для класса .main было установлено значение flex-grow, равное 3, а для боковой панели было установлено значение flex-grow, равное 1, чтобы установить размеры? Здесь столбцы grid-template-columns были установлены как 1fr и 3fr. Здесь сетка принимает форму с дробными единицами. С этими значениями очевидно, что есть два столбца, и они не имеют одинаковой ширины. Столбец со значением 3fr в три раза шире другого. Это объясняет, почему боковая панель кажется более узкой, чем область контента.

макет с помощью сетки маховика и основного столбца flexbox для скриншота сетки

Затем единицы fr, используемые для контейнера, необходимо скорректировать для заголовка. Столбцы grid-template-column были изменены на 1fr и 1fr. Таким образом, есть два столбца одинакового размера, и элементы навигации и кнопка поместятся.

 заголовок {
    область сетки: заголовок;
    отображение: сетка;
    столбцы сетки-шаблона: 1fr 1fr;
}
Скриншот заголовка сетки макетов с помощью гирлянды маховика и flexbox

Чтобы поместить кнопку, нам просто нужно использовать justify-self и установить для нее значение end.

 кнопка заголовка {
    оправдать себя: конец;
}

Навигация размещена там, где она должна быть:

 заголовок навигации {
    оправдать себя: начать;
}

Нижний колонтитул во всю ширину не нуждается в наборе разных столбцов, так как содержимое находится посередине.

Как создать макет с помощью Flexbox и CSS Grids

Теперь, когда мы увидели, что каждый метод может делать по отдельности, пришло время создать что-то более сложное, комбинируя макеты Flexbox и CSS Grid.

макет с помощью сетки маховика и комбинированного макета flexbox

Смотрите это на Codepen.

Вот основная схема запуска сетки:

компоновка с помощью сетки маховика и комбинированного стартера flexbox

Смотрите это на Codepen.

Заметили, как дизайн опирается как на столбцы, так и на строки? Этот макет требует, чтобы элементы выстраивались в линию и вели себя последовательно в обоих направлениях, поэтому использование CSS Grid эффективно для общего макета.

компоновка по сетке маховика и наброску сетки флексбокса

Планирование является ключевым моментом в таком макете. Это хорошая идея, чтобы сначала набросать его и посмотреть, как все сложится в буквальном смысле. Запустить код, имея display: grid; важно; без него использование этого типа раскладки не получится. Здесь следует отметить, что между блоками контента есть интервал. Это было достигнуто с помощью grid-column-gap и grid-row-gap.

 .контейнер {
  отображение: сетка;
  сетка-шаблон-столбцы: 0.4fr 0.3fr 0.3fr;
  зазор столбца сетки: 10 пикселей;
  зазор между строками сетки: 15 пикселей;
}

Дробные единицы вернулись для этого макета, и теперь необходимо три области. Первое значение 0,4 fr немного шире, чем второе и третье, которые оба равны 0,3 fr.

Макет столбца и строки

Вот где важно сослаться на диаграмму с самого начала. Вот как размещается заголовок, начиная сверху. Он охватывает все столбцы и одну строку.

 .заголовок {
  начало столбца сетки: 1;
  конец столбца сетки: 4;
  сетка-строка-начало: 1;
  сетка-ряд-конец: 2;
  цвет фона: #d5c9e2;
}

Если вы хотите использовать сокращение, начальное и конечное значения должны быть в одной строке и разделены косой чертой. Это будет выглядеть так:

 .заголовок {
  сетка-столбец: 1/4;
  сетка-ряд: 1/2;
  цвет фона: #55d4eb;
}

Чтобы разместить все остальные элементы, нужно просто добавить в CSS правильные значения сетки и столбца. Вместо того, чтобы рассматривать их здесь один за другим, этот пример находится на Codepen.

Следующим шагом после создания Grid Layout является тонкая настройка содержимого.

Навигация

Flexbox идеально подходит для размещения элементов заголовка. В базовом примере макета это затрагивалось с помощью justify-content: space-between. Пример сетки должен был иметь justify-self: start; по навигации и самооправданию: конец; для кнопки, чтобы размещать вещи, но Flexbox упростил интервалы для навигации.

 .заголовок {
  сетка-столбец: 1/4;
  сетка-ряд: 1/2;
  цвет: #9f9c9c;
  преобразование текста: верхний регистр;
  нижняя граница: 2px сплошная #b0e0ea;
  отступ: 20px 0;
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
  выравнивание элементов: по центру;
}
макет с помощью сетки маховика и комбинированного скриншота меню flexbox

Этот же формат будет использоваться и здесь. В логотипе, пунктах меню и кнопке для интервалов используется выравнивание контента Flexbox.

Сетка содержимого столбца

Для случаев, когда требуется, чтобы элементы выстраивались в одном направлении, что означает, что это более «одномерно», Flexbox обычно является лучшим вариантом. Кроме того, Flexbox хорош в динамическом масштабировании элементов. Возможно, вы пробовали это в ряде полей, добавляя display:flex; для родительского элемента и свойства flex для дочерних элементов. С помощью этой техники формируется красивая линия, и это эффективный способ убедиться, что все элементы имеют одинаковую высоту.

Содержимое строки с текстом и кнопками

В разделе «дополнительный контент» добавлены три области с текстом и кнопками. Flexbox позволяет легко сохранить заданную ширину для трех столбцов.

Макет с помощью сетки маховика и комбинированного макета Flexbox Скриншот дополнительного контента
 .дополнительный {
  сетка-столбец: 2/4;
  сетка-ряд: 4/5;
  набивка: 1рем;
  дисплей: гибкий;
  flex-wrap: обернуть;
  граница: 1px сплошная #ececec;
  выравнивание содержимого: пробел между;
}

Одно исключение Flexbox

Да, я говорил, что Flexbox лучше подходит для одномерных макетов, сеток или столбцов, но если вы читали пост «Как использовать Flexbox для создания современного макета дизайна карточек CSS», там был продемонстрирован «последний ряд» хака Flexbox, который был продемонстрирован. чтобы строки и столбцы были сбалансированы даже без четного числа карт.

макет с помощью сетки маховика и комбинированной сетки изображений flexbox
 .related-images {
  сетка-столбец: 1/3;
  сетка-ряд: 5/6;
  отображение: сетка;
  столбцы сетки-шаблона: повтор (4,1fr);
  зазор сетки: 1rem;
}
.related-images .icon {
    цвет фона: белый;
    гибкий: 1 1 150 пикселей;
}

Резюме подхода к проектированию

По сути, подход, который я использовал здесь, заключался в использовании CSS Grid Layout для общего макета (и всего, что не было линейным в дизайне). В областях содержимого сетки Flexbox использовался для упорядочивания и точной настройки стиля в областях сетки.

Ресурсы

Существует так много отличных ресурсов для Flexbox и CSS Grid Layouts, что их слишком много, чтобы перечислять. Вот некоторые из них, которые помогут вам начать работу в правильном направлении и вдохновят вас на создание макетов.

  • Шпаргалка по выравниванию коробки
  • Лаборатория макетов Джен Симмонс
  • Полное руководство по сетке
  • Полное руководство по Flexbox

Надеюсь, эти упражнения дали вам лучшее представление о том, как создавать макеты с помощью CSS Grid Layouts и Flexbox. Что вы думаете об этих новых технологиях? Как они помогли вашему процессу разработки?