Стоит ли body делать grid
Обновлено: 05.07.2024
Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.
Что вы узнаете из этой статьи:
- как раньше работали с CSS-разметкой;
- разницу между устаревшими подходами и современными стандартами;
- как начать работу с новыми стандартами (Flexbox и Grid);
- почему вас должны волновать эти современные стандарты.
Как раньше работали с CSS-разметкой
Задача
Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями — боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?
Вот пример того, к чему мы стремимся:
Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента
Для начала я покажу, как решить эту задачу с помощью устаревших подходов.
1. Создаём div с двумя элементами
Очевидно, что в main больше текста.
Tproger , Удалённо , От 100 000 до 200 000 ₽
Выделим aside цветом, чтобы его проще было отличить:
2. Размещаем обе секции рядом
Для этого напишем следующее:
Этот стиль разделяет доступное пространство в необходимых пропорциях и устанавливает float для aside и main .
Два блока, расположенные рядом
Для тех, кто не знаком с float : это относительно старый способ перемещения элементов влево или вправо.
Как видно на изображении выше, задача всё ещё не выполнена — высота боковой панели не совпадает с высотой основной зоны. Исправим это.
3. Используем трюк с display: table
Чтобы решить эту проблему, надо использовать display: table .
Если вы с ним не знакомы, то вот что надо делать:
- Делаем родительский контейнер (в нашем случае элемент body ) таблицей:
- Убираем float и делаем дочерние элементы aside и main ячейками таблицы:
Как только мы сделали это, задачу можно считать решенной. По крайней мере, так её решали раньше.
Оба блока теперь одинаковой высоты.
Разница между устаревшими подходами и современными стандартами
Теперь, когда у вас есть представление о том, как проблему решали раньше, давайте взглянем, на что способны Flexbox и Grid.
Flexbox и Grid — это идеальные решения для CSS-разметки, являющиеся современными стандартами. Если вам необходимо писать CSS-код на хорошем уровне, то обязательно изучите их.
Решение задачи с помощью Flexbox
Контекст форматирования Flexbox инициализируется путем создания flex-контейнера .
Родительским элементом является body . Он содержит боковую панель и основную зону. Создаём контейнер:
Flexbox в действии
Не забудем о пропорциях:
Вуаля! Проблему можно считать решенной:
С Flexbox можно делать много разных вещей:
-
Отцентрировать боковую панель и основную зону по вертикальной оси:
Боковая панель и основной контент отцентрированы по вертикальной оси
Боковая панель отцентрирована по вертикальной оси
Боковая панель теперь размещена после блока с основным контентом
И я затронул лишь верхушку айсберга Flexbox.
Flexbox доступен в большинстве поддерживаемых браузеров. Им можно полноценно пользоваться в Firefox с 28 версии, Chrome с 29, Safari с 6.1 и Edge с 12.
Прим. перев. Разобраться с Flexbox поможет наше наглядное введение.
Решение проблемы с помощью Grid
В отличие от Flexbox, который по большей части работает в одном измерении, с CSS Grid вы можете использовать как ряды, так и колонки. Посмотрим, как решить нашу проблему с его помощью.
Начинается всё так же, как и в случае с Flexbox. Создаём контейнер:
И вот что мы получим:
Grid доступен в большинстве поддерживаемых браузеров, хотя и в меньшем количестве. Им можно полноценно пользоваться в Firefox с 52 версии, Chrome с 57, Safari с 10.1 и Edge с 16.
Наше последнее изображение пока никак не отличается от предыдущих. Так в чём же магия?
Что, если мы разделим пропорции ширины, как раньше:
Пропорциональное распределение ширины для дочерних элементов
Да, результат отличается, но нам он не подходит. Боковая панель пока не расположена сбоку от главной зоны.
Вот мы и подошли к сути Grid-разметки. После инициализации Grid-контейнера при помощи display: grid необходимо определить ряды и строки внутри него.
Вот как это делается:
Решение в одну строку — красиво, не правда ли? grid-template-columns определяет пропорции столбцов в сетке.
Но с помощью Grid можно сделать гораздо больше.
Сначала добавим немного цвета главному блоку, чтобы примеры были более наглядными:
Вот что мы должны получить:
Заливка цветом зоны основного контента
Посмотрим, что хорошего может предложить Grid:
-
Можно определить разрыв между столбцами:
С разрывом между колонками выглядит гораздо опрятней.
Две колонки все еще соответствуют пропорциям 30% / 70%
Добавлен разрыв между строками
Разная высота строк
Для начала хватит и этого — но это далеко не всё.
Как начать работу с новыми стандартами?
Вы увидели пример того, как Flexbox и Grid предоставляют более удобные решения для разметки. Так как начать?
Для начала я рекомендую вам попрактиковаться с примерами из этой статьи. После вы можете начать изучать более сложные случаи. И не забывайте, что Grid пока поддерживается не всеми браузерами. Кроме того, не стоит забывать об адаптивности сайта, подробнее об этом в статье про адаптивную вёрстку.
В качестве практики вас также может заинтересовать игра Flexbox Froggy, которую мы включили в подборку игр для программистов.
Почему вас должны волновать эти стандарты?
Если вы до сих пор не поняли, почему стоит использовать Flexbox и Grid, то вот несколько проблем, с которыми вы можете столкнуться при использовании предыдущих решений:
- если вы используете «плавающие» блоки и clearfix, то знаете, что с ними могут возникать проблемы;
- при абсолютном позиционировании элементы могут накладываться друг на друга;
- при использовании display: table остается много ненужной разметки;
- при использовании inline-block возникнут проблемы с пустыми местами.
Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.
Перейти к регистрации
Для понимания: блоки .left и .right являются боковыми панельками, которые в определенном брейкпоинте должны сложиться в одну панель слева (в примере media queries убраны, для облегчения понимания). В примере так и происходит, НО! Высота блока .left и блока .right растягиваются по контенту блока .main . Соответственно, при большом кол-ве контента в блоке .main , непрерывная панель из .left и .right уже не получается. Вопрос: как заставить боковые панели тянуться в высоту по собственному контенту, а не по высоте .main ?
My concern is that using a wrapper <div> can leave some unwanted padding / margins if you want the content to be flush with edges of the browser.
2 Answers 2
Just add the universal selector (*) to your CSS, this will apply any rule to every element on the page. If any elements need them you can then add margins or padding to those elements themselves. This helps get rid of spacing when you can't quite tell what is causing it.
3,714 10 10 gold badges 28 28 silver badges 37 37 bronze badgesSure, if you are seeking a pure CSS solution without any third party API systems such as Bootstrap, you can use CSS Grids.
In your CSS: (though I think it would be better suited for a .container rather than the body class.
Как сделать чтобы было ровно, gap'ы не дублировались и ширина всего grid'a была фиксированной?
Скорее всего, это не гэпы, а размеры картинок не соответствуют размеру ячейки.
Используйте object-fit.
Читайте также: