Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.
Что вы узнаете из этой статьи:
- как раньше работали с CSS-разметкой;
- разницу между устаревшими подходами и современными стандартами;
- как начать работу с новыми стандартами (Flexbox и Grid);
- почему вас должны волновать эти современные стандарты.
Как раньше работали с CSS-разметкой
Задача
Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями - боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?
Вот пример того, к чему мы стремимся:
Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента
Для начала я покажу, как решить эту задачу с помощью устаревших подходов.
1. Создаём div с двумя элементами
Например,
Очевидно, что в main больше текста.
Выделим aside цветом, чтобы его проще было отличить:
Aside { color: #fff; background-color: #8cacea; }
2. Размещаем обе секции рядом
Для этого напишем следующее:
Aside, main{ float: left; }
Этот стиль разделяет доступное пространство в необходимых пропорциях и устанавливает float для aside и main .
Два блока, расположенные рядом
Для тех, кто не знаком с float: это относительно старый способ перемещения элементов влево или вправо.
Как видно на изображении выше, задача всё ещё не выполнена - высота боковой панели не совпадает с высотой основной зоны. Исправим это.
3. Используем трюк с display: table
Чтобы решить эту проблему, надо использовать display: table .
Если вы с ним не знакомы, то вот что надо делать:
- Делаем родительский контейнер (в нашем случае элемент body) таблицей: body { display: table; }
- Убираем float и делаем дочерние элементы aside и main ячейками таблицы: aside, main{ display: table-cell; }
Как только мы сделали это, задачу можно считать решенной. По крайней мере, так её решали раньше.
Оба блока теперь одинаковой высоты.
Разница между устаревшими подходами и современными стандартами
Теперь, когда у вас есть представление о том, как проблему решали раньше, давайте взглянем, на что способны Flexbox и Grid.
Flexbox и Grid - это идеальные решения для CSS-разметки, являющиеся современными стандартами. Если вам необходимо писать CSS-код на хорошем уровне, то обязательно изучите их.
Решение задачи с помощью Flexbox
Контекст форматирования Flexbox инициализируется путем создания flex-контейнера .
Родительским элементом является body . Он содержит боковую панель и основную зону. Создаём контейнер:
Body { display: flex; }
Flexbox в действии
Не забудем о пропорциях:
Aside { width: 25%; } main { width: 75%; }
Задача решена
С Flexbox можно делать много разных вещей:
И я затронул лишь верхушку айсберга Flexbox.
Flexbox доступен в большинстве поддерживаемых браузеров. Им можно полноценно пользоваться в Firefox с 28 версии, Chrome с 29, Safari с 6.1 и Edge с 12.
Прим. перев. Разобраться с Flexbox поможет наше .
Решение проблемы с помощью Grid
В отличие от Flexbox, который по большей части работает в одном измерении, с CSS Grid вы можете использовать как ряды, так и колонки. Посмотрим, как решить нашу проблему с его помощью.
Начинается всё так же, как и в случае с Flexbox. Создаём контейнер:
Body { display: grid; }
Вот весь CSS:
Body { display: grid; background-color: #eeeeee; } aside { color: #fff; background-color: #8cacea; }
И вот что мы получим:
Первичный вариант
Grid доступен в большинстве поддерживаемых браузеров, хотя и в меньшем количестве. Им можно полноценно пользоваться в Firefox с 52 версии, Chrome с 57, Safari с 10.1 и Edge с 16.
Наше последнее изображение пока никак не отличается от предыдущих. Так в чём же магия?
Что, если мы разделим пропорции ширины, как раньше:
Aside { width: 25%; } main { width: 75%; }
Пропорциональное распределение ширины для дочерних элементов
Да, результат отличается, но нам он не подходит. Боковая панель пока не расположена сбоку от главной зоны.
Вот мы и подошли к сути Grid-разметки. После инициализации Grid-контейнера при помощи display: grid необходимо определить ряды и строки внутри него.
Вот как это делается:
Body { grid-template-columns: 30% 70%; }
Решение в одну строку - красиво, не правда ли? grid-template-columns определяет пропорции столбцов в сетке.
Задача решена
Но с помощью Grid можно сделать гораздо больше.
Сначала добавим немного цвета главному блоку, чтобы примеры были более наглядными:
Main { background-color: rgba(39,174,96 ,1); color: #fff; }
Вот что мы должны получить:
Заливка цветом зоны основного контента
Посмотрим, что хорошего может предложить Grid:
- Можно определить разрыв между столбцами: body {
grid-column-gap: 15px;
}
Вот результат:
С разрывом между колонками выглядит гораздо опрятней.
Нет необходимости в добавлении отступов к блокам aside и main: это делает grid-column-gap .
- Можно сделать столько столбцов, сколько вам нужно. Примеры выше использовали только по одному элементу aside и main . Добавим ещё два:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Добавлен разрыв между строками
Для упрощения можно использовать сокращение: grid-gap: 15 px вместо grid-row-gap и grid-column-gap .
- Можно определять размеры строк: body {
grid-template-rows: 200px 300px 400px;
}
Разная высота строк
Теперь высота первой, второй и третьей строк равна 200, 300 и 400 пикселей соответственно.
Для начала хватит и этого - но это далеко не всё.
Как начать работу с новыми стандартами?
Вы увидели пример того, как Flexbox и Grid предоставляют более удобные решения для разметки. Так как начать?
Почему вас должны волновать эти стандарты?
Если вы до сих пор не поняли, почему стоит использовать Flexbox и Grid, то вот несколько проблем, с которыми вы можете столкнуться при использовании предыдущих решений:
- если вы используете «плавающие» блоки и clearfix, то знаете, что с ними могут возникать проблемы;
- при абсолютном позиционировании элементы могут накладываться друг на друга;
- при использовании display: table остается много ненужной разметки;
- при использовании inline-block возникнут проблемы с пустыми местами.
Я думаю, что вы уже в курсе, что Grid превосходит Flexbox для создание макетов. Но как насчет адаптивных макетов? Что лучше использовать Flexbox или Grid? Оба умеют работать с адаптивными макетами. Вы можете подумать, что Flexbox лучше подходит, в конце концов - элементы Flex могут растягиваться, сжиматься, изменять направление и т.д. Но в Grid на самом деле есть несколько новых трюков, которые сэкономит вам много времени и проблем для адаптивных макетов.
Функция Minmax
Первый блестящий новый инструмент Grid, функция minmax, который позволяет нам определять диапазоны для столбцов и строк в нашем макете. В этом примере у нас есть оранжевая боковая панель, и мы хотим чтобы ширина была не меньше 100 пикселей, но не более 30% от ширины контейнера. Ширина контейнер 500 пикселей, поэтому наша боковая панель с удовольствием занимает 30% (150 пикселей).
Вот такой же точно код, но ширина контейнера меньше 150px. Теперь наше минимальное значение срабатывает и гарантирует, что оранжевая боковая панель не будет меньше 100 пикселей.
Работа функции minmax просто удивляет, в большинстве случаев вам даже не нужно будет использовать медиа-запросы.
Мы можем добиться аналогичного эффекта с помощью Flexbox, но для этого требуется немного больше работы и кода. Мы должны использовать комбинацию flex-grow, min-width, max-width:
Метод с Grid более гибкий и проще адаптируется. Кода меньше почти в два раза.
Одно правило для всех элементов
Если вам все-таки нужны медиа-запросы, с макетом Grid, это легко сделать. Предположим, мы хотим изменить этот макет на мобильном устройстве в один столбец. С помощью Flexbox нам нужно будет изменить каждый элемент в макете, чтобы переопределить минимальную ширину. Максимальную ширину отменять не нужно, так как минимальная ширина имеет приоритет.
Если у вас простой макет этот подход вполне себе рабочий. Но чем сложнее будет ваш макет, тем больше элементов нужно будет переопределять через медио-запросы. С помощью Grid, эту задачу решить намного проще.
В этой статье вы найдете полный курс по сеткам CSS. Мы разберем что это такое, какие отличая с FlexBox и как с можно работать с CSS Grid.
Сетки CSS это новый подход к созданию адаптивных сайтов с множеством блоков, расположенных в любых местах сайта. Помимо CSS Grid существует также технология , которая очень схожа с сетками. Разбираться в мельчайших различиях между ними мы не будем, так как на это понадобиться отдельная статья, но вкратце опишем основные отличия.
CSS Grid можно назвать более крутой и улучшенной версией FlexBox , ведь FlexBox позволяет работать лишь в одной плоскости: либо создавать столбцы, либо создавать ряды.
Сетки CSS позволяют делать больше, так как они работают в обеих плоскостях одновременно. Таким образом, создание адаптивных блоков сайта происходит намного проще, а возможности для расстановки объектов как вам вздумается - просто безграничны.
Предлагаем вам посмотреть полноценное видео по изучению сеток CSS, чтобы моментально вникнуть в суть CSS Grid :
- Урок по ;
В ходе урока было создано три страницы, код каждой страницы вы можете скопировать ниже.
Первый файл
Второй файл
Третий файл
Принцип работы
Работа с сетками очень проста. Алгоритм действий здесь следующий:
- Создаем один основной блок и помещаем в него другие блоки (секции );
- Добавляем к основному блоку свойство display: grid ;
- Ко всем элементам основного блока теперь можно применять свойства сеток CSS;
- Добавляем различные свойства. Документацию по всем возможным свойствам вы можете ;
Каждому блоку можно устанавливать ширину, высоту, его расположение. Блоки, которые создаются на основе сеток сразу имеют адаптивный дизайн, который подстраивает блоки под различные разрешения экранов.
Таким образом, вы можете писать меньше, а получать больше. Что еще может быть круче? Делитесь своим опытом использования сеток в своих проектах в комментариях к этой статье ⇣
Специально для пользователей сайта сайт мы предоставляем практический урок, по применению системы 960 Grid. Представьте, что нам дали дизайн для вёрстки. Сначала мы должны наметить себе план реализации структуры сайта, а только потом приступить непосредственно к коду. После изучения этой статьи вам будет по зубам любая классическая вёрстка за кратчайшие сроки и натуральный цвет волос на многие годы (без седины). Итак, вот наш дизайн:
1. Создание сетки
Как вы уже знаете, система 960 Grid использует целый набор классов и доступна в нескольких вариантах (12 колоночной и 16 колоночной версиях). Основной контейнер, независимо от количества колонок всегда будет шириной 960px. Для этого дизайна мы выберем 12 колоночную систему. Каждый блок в системе 960 Grid имеет внешний отступ (margin) 0 10px. Это гарантирует нам ровные, пропорциональные отступы в 20px. Для тех, кого смущает размер 960px, советую взглянуть на вот эту схему. Данный размер является оптимальным для подавляющего большинства разрешений мониторов. Итак, у нас есть возможность создавать блоки вот такой ширины:
- 140px
- 220px
- 300px
- 380px
- 460px
- 540px
- 620px
- 700px
- 780px
- 860px
- 940px
У каждого размера есть свой класс, название которого строится по схеме grid_X, где X это количество колонок. Если вам нужен блок в 960px, то следует выбрать класс grid_12. Для того, чтобы активировать систему 960 Grid, необходимо родительскому контейнеру задать класс container_12 или container 16. Ниже находится небольшой пример страницы, состоящей из 3х блоков. Ширина первого равна ширине 960px, остальные 2 в два раза меньше:
Запомните, что когда вы заполняете строку блоками с классом grid_X, убедитесь в том, что в сумме они дают не больше 12. К примеру как у нас - два блока grid_6 + grid_6 = 12. Меньше можно: 6, 4, 2 и т.д. Теперь, когда мы пробежались по основным принципам, можем приступить к практическому занятию:
2. Создаём Mock-Up
Попробуем построить схему того, что нам надо сверстать. В первую очередь нам необходимо 2 блока по 960px. Один для логотипа, другой для навигации. Дальше 2 блока (на одной строке), для постера и презентации сайта, блок разделитель (на всю ширину), 4 колонки (на одной строке), снова блок разделитель и футтер. Приблизительно вот так:
Я думаю, что после просмотра изображения вы уже знаете, какие классы нам необходимы. Попробуйте подобрать их сами, а потом взгляните на код ниже, чтобы убедиться в правильности ваших мыслей:
Помните, что в конце каждой строчки нам необходимо вставлять
для нормального отображения во всех браузерах. Не забудьте так же заинклудить 960 Grid CSS на вашу страницу в разделе head.Итак, скелет готов, так что пора заняться оформлением. Зададим высоту и фоновый цвет блокам разделителям. Высота блока с меню будет зависеть от самого меню. Так же не забудьте добавить логотип:
Div.spacer { background-color: #8FC73E; height: 1em; } div#navbar { background-color: #8FC73E; padding: 10px 0; }
Вот что у нас должно получиться:
Информация нас сейчас совершенно не интересует, так что в центральные колонки можете вставить контент с вот этой вот страницы. Перед тем, как заняться верхней частью, займёмся нижней. В нашем дизайне фон футера окрашен в серый цвет. На данный момент мы не можем это реализовать так как если вы помните, между блоками есть некоторый отступ, который не позволит нам полностью закрасить данный участок. Для решения этой задачи вынесем 3 блока, относящиеся к футеру в отдельные блоки с id = footer. Ещё одна деталь: когда мы используем классы внутри классов, то хорошо бы задать значения alpha (для того, чтобы указать какой блок будет первым и omega - для последнего):
Div#footer { background-color: #e5e5e6; }
Превосходно! Теперь у нашего футера есть цвет фона. Добавите в него какой-то текст и приступим к блоку с навигацией. По всем законам современных принципов вёрстки, навигация это ненумерованный список. Добавьте следующий код и стиль:
- Articles
- Topics
- About
- Editors
- Contact
