Как сделать два столбца в html

Multi-Column Layout with Flexbox

By default the browser lays out elements in lines going down the page. Each new block element starts a new line, so all the blocks are stacked on top of each other. This is fine for a document, but there are many times when you’ll want to arrange these block elements to be side-by-side, in multiple columns on the same line. This is known as a multi-column layout, and until recently, it’s been surprisingly hard to do.

In the bad old days of the web (90s and 2000s) many web developers turned to <table> elements to create multi-column layouts, but as many others pointed out, this was a horrible semantic misuse of that element. Although tables happen to create a grid-like layout, they are meant for rows of data, not random content you just want to layout side-by-side. Plug-ins that helped you import data from <table> elements into spreadsheets like Excel would mistakenly treat all multi-column layouts as tables of data!

The other common approach was to use floated elements. Each column in the layout was floated to the left and given a fixed width. The columns that followed then floated up next to their previous sibling columns. At the end of the row the floats were cleared so that the next block element would start a new line. It sounds straightforward in theory, but it was very difficult to make it work consistently across all browsers. Clearing the floats reliably also required some really hacky tricks.

Thankfully, a new standard was published in 2012 that makes multi-column layouts easy and reliable: flexbox. It’s now widely supported in all the current browsers, but if you still need to support IE 9 or earlier, you’ll have to use the older float technique.

The Basics

Creating a multi-column flexbox layout is super-easy. Follow along by creating a new HTML page, and adding this content to the body, or by opening this example over in CodePen.

When creating elements for a multi-column flexbox layout, add one element for the entire row, and one child element for each column in your layout. Here we also add a style class name to the row and column elements so that we can select them more easily in our CSS. The style class names we are using are typical, but there’s nothing magic about those names: they are just names we can refer to in our CSS selectors. You can use any class name you want, or elements selectors if you use distinct element names instead.

Open the page, and note that the columns are all stacked on top of each other by default. To make these be side-by-side, add a stylesheet to your page, and define this one rule to make it multi-column:

Setting display: flex; on the .row element tells the browser to make it a flexbox. The immediate child elements will then become columns on the same line.

By default the browser will adjust the width of these columns based on their content. In this case, all of the columns have the same text in them, so the browser grows their width equally, and then wraps the text within the column.

Growing Columns

But what if the columns don’t have much content? What if they only need a small amount of width each? To see what happens, remove the <p>Lorem. </p> elements from the HTML, or open this already-altered example in CodePen.

You’ll notice that the columns are now only as wide as the headings, and are scrunched up against each other, taking up only part of the row width. This is because columns only grow in width to fit their content by default. If you want them to grow to consume an equal amount of the row width, regardless of their content, add another CSS rule to your stylesheet:

This tells the browser to grow all of your <div > elements equally. The flex property can adjust up to three settings at once: flex-grow , flex-shrink , and flex-basis . It’s recommended that you use this shorthand property, especially when adjusting only one or two of those values, so that the browser can reset the properties you don’t mention to a sensible default.

Here we are setting flex to only one number, so this sets flex-grow to 1 . The flex-grow property controls how much of the remaining row width the column should get relative to other columns. If all columns have a setting of 1 , they all grow by an equal amount, and thus end up exactly the same size.

Setting flex to just one number also defaults flex-shrink to 1 and flex-basis to 0 . The flex-shrink property controls how much a column will shrink in width relative to other columns when the row isn’t long enough to hold all of the column content on one line (e.g., the example above). If all columns have a flex-shrink of 1 , they all shrink by the same amount, and thus end up the same width.

The flex-basis property sets the base size of the column, and here it is being set to 0 , which tells the browser to size it according to the flex-grow and flex-shrink settings regardless of the content within the column.

The number you assign to the flex-grow property establishes a ratio between the columns that determines how much of the remaining row width each column should get. In the example above, the flex-grow property on all of the columns is set to 1 , so they all get an equal amount of the remaining width. But you can adjust this on a per-column basis to give some columns more of the remaining width than others. For example, say you had a three-column layout where you wanted the middle column to get twice as much of the remaining row width as the outside columns. You’d start with HTML like this:

And use CSS like this to set flex differently for the middle column:

Flexbox also makes it easy to grow some columns while letting others size only to match their content. For example, say you want to show an icon or two on the far right, but have the content in the first column grow to consume the rest of the available row width. Change your HTML content to this (requires Font Awesome for the icon):

Because we use class=»col-icons» on the second column, that element will no longer be selected by our .col style rule, so it won’t get the flex: 1 property setting. The other column will, so it will grow to consume the rest of the available row width. This will continue to work even if we add more icons to the right side: that column will grow only as large as it needs to be to show its content, but the first column will grow to consume the remaining row width.

Specifying Widths Explicitly

So far we’ve seen how to make columns just wide enough to fit their content, or grow to consume the available row width, but what if you want to specify an exact column width, like 20% or 300 pixels? You can do this using the flex-basis property.

Box Sizing

When you start setting widths explicitly, it’s a good idea to also tell the browser that you want the element’s padding and borders to be included in the element’s width. By default, browsers consider an element’s width to be only the width of the content area: padding and borders are then added on top of that. So if you set the width of an element to be 300px but then add 10px of padding to the left and right sides, the overall width of the element will actually be 320px by default.

To make the browser include padding and borders when setting the widths of all elements, use a rule like this:

Flex Basis

Once you specify this, you can now set explicit widths on your columns. For example, say you want a two column layout where the first column (your navigation area) is exactly 200 pixels, and the second (the main content area) grows to fill the remaining row width. Start with HTML like this:

Then use this CSS in your stylesheet:

Vertical Centering

Flexbox also solves another long-standing problem: vertically-centering content. A few years ago it became trendy to make the first block of content on your page the same height as the browser’s viewport, with some splashy content right in the center. This was quite tricky before flexbox, but is now almost trivial.

Start with HTML like this:

Then add some CSS to make the .fullpage element a flexbox that stretches to fill the entire viewport, and centers the .content element both vertically and horizontally:

When you open this page, you see only the first section consuming the entire browser viewport, regardless of how large the browser window is. Try resizing your window and you’ll notice how the first section grows to fill it. When you scroll down, you then see the second section, and any other elements you might add after it.

Nesting

The last thing to mention about flexboxes is that they can be nested. That is, a column within a flexbox can contain another flexbox with its own columns. This can be handy when you need to sub-divide a column.

If you define a single set of style classes for rows and columns, you can reuse them at several levels:

If you need to style the nested flexbox differently from the parent flexbox, just add a different style class name to the nested flexbox:

You can then use descendant selectors to target just the columns within the nested flexbox:

More Information and Practice

THe Flexbox standard defines several other properties you can use to precisely control a multi-column layout. To learn more, check out these very helpful resources:

Макет с несколькими столбцами

Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.

Необходимые знания:	Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.)
Задача:	Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете.

Базовый пример

Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый multicol. Вы можете следовать за нами скачав файл отправной точки multicol и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.

Наша отправная точка содержит немного очень простого HTML; обёртка с классом container внутри которого имеется заголовок и несколько параграфов.

<div> с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств column-count или column-width (en-US). Какое значение вы дадите свойству column-count столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:

Колонки, которые вы создаёте имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.

Измените ваш CSS чтобы использовать следующий column-width :

Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер не делится точно на эту ширину.

Стилизация столбцов

Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:

• Изменение размера отступов между столбцами используя column-gap .
• Добавление линейки между столбцами при помощи column-rule .

Используя ваш пример выше, измените размер отступа добавлением свойства column-gap :

Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи column-rule . Таким же способом как и свойство border с которым вы сталкивались в предыдущих уроках, column-rule — это короткая запись column-rule-color , column-rule-style и column-rule-width (en-US) и принимает те же значения что и border .

Попробуйте добавить линейки других стилей и цветов.

Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи column-gap . Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер column-gap .

Свойств column-span

Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство column-span (en-US) установленное на значение all .

Примечание: Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение none (по умолчанию) либо all .

Столбцы и фрагментация

Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведёт себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.

Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.

Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации CSS Фрагментации (en-US) . Эта спецификация даёт нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство break-inside (en-US) со значением avoid к правилам .card . Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.

В настоящее время также стоит добавлять старое свойство page-break-inside: avoid для лучшей поддержки старых браузеров.

Перезагрузите страницу и ваши блоки должны остаться в целости.

Проверь свои навыки!

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Поверьте свои навыки: Макет с несколькими столбцами.

Заключение

Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, ещё один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.

Введение в CSS3 Multicolumn. Работаем с колонками

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

Замечание
В случае Internet Explorer 10 это автоматически означает возможность использования CSS3 Multi-column при разработке приложений в стиле Metro для Windows 8 с использованием HTML/CSS/JS.

В рамках статьи я не буду использовать браузерные префиксы, чтобы на запутывать код, но при реальном использовании не забудьте добавить поддержку префиксов для Firefox, Safari и Chrome.

Сразу отмечу еще две немаловажные детали.
Во-первых, в большинстве случаев применение многоколоночной верстки для текста можно рассматривать как развитие отображения контента сайта по пути Progressive Enhancement, в рамках которого пользователи более современных сайтов будут получать больше плюшек:

Во-вторых, многоколоночное отображение хорошо сочетается с возможностями Media Queries (и идеями отзывчивого дизайна, Responsive Design), например, при разных размерах экрана можно форматировать текст в разное количество колонок:

И последнее, что я хотел бы отметить во введении, чтобы на этом не останавливаться далее и со спокойной совестью перейти к техническим деталям: при использовании многоколоночной верстки текста надо помнить, что подобное расположение предполагает и определенный порядок чтения (для европейских языков слева направо). Поэтому важно, чтобы для перевода взгляда от одной колонки к другой было необходимо совершать как можно меньше дополнительных действий, особенно это касается вертикальных скроллов:

В этом смысле горизонтальная природа колонок лучше сочетается с горизонтальным скроллом (как это, используется во многих приложениях для Win8 — например, это хорошо видно по приложению USA Today):

В общем, колонки — это прекрасно, но не забывайте об удобстве пользователей. А теперь в бой!

Колонки

Итак, у нас есть текст (контент), который мы хотим разместить в несколько колонок. С чего начать?

Чтобы превратить такой элемент в многоколоночный нужно через стили в CSS выставить одно из свойств: column-width или column-count в значение, отличное от auto. Например,
чтобы разбить текст на две колонки, достаточно сделать так:

Все остальное сделает браузер:

Альтернативное свойство — column-width — позволяет задать оптимальную ширину колонок:

При этом браузер сам разбивает контент на нужное количество колонок, чтобы заполнить внешний контейнер, подстраиваясь под указанную ширину колонок. Важный момент заключается в том, что реальная ширина может отличаться от заданной в большую или меньшую сторону: на картинке выше серая полоска имеет как раз ширину в 150px — и, как видно, она меньше, чем реальная ширина колонки.

Такое поведение определено спецификацией и позволяет (автоматически) добиться большей гибкости при разработке адаптивной разметки:

Например, если у вас контейнер шириной 100px и вы задали колонки шириной 45px, то браузер посчитает, что влезет только две колонки, а чтобы заполнить все место, увеличит размер каждой до 50px. (Здесь также учитывается отступ между колонками, о чем будет рассказано в следующем разделе.)

В определенном смысле, это можно рассматривать как альтернативу указанию с помощью Media Queries разного количества колонок в зависимости от размера окна и с автоматическим рассчетом ширины колонок:

Я второй раз говорю про альтернативу — и вот почему.

count vs. width

• column-count позволяет указать число колонок, на которые нужно поделить контент, при этом ширину колонок определяет браузер с учетом доступного пространства.
• column-width заходит с обратной стороны: указывает, какими примерно должны быть колонки, однако, оставляет рассчет их количества на усмотрение браузера.

Что будет, если указать и количество колонок, и оптимальную ширину? Согласно спецификации, в этом случае column-count определяет максимальное количество колонок:

В спецификации вы также найдете псевдо-код, описывающий алгоритм рассчета количества колонок и их ширины.

Отступы и разделительные линии

Теперь, когда мы научились создавать колонки, самое время научиться управлять тем, что происходит между ними: отступами и разделительными линиями.

Чтобы изменить отступ между колонками, определено свойство column-gap. Чтобы визуально обозначить раздел между колонками, введено еще одно свойство — column-rule-*:

column-gap

column-gap позволяет указать ширину пространства между колонками. Свойство принимает в качестве значения длину, либо определяемое браузером значение normal (спецификация рекомендует использовать 1em), являющееся также значением по умолчанию:

Важно учитывать, что размер отступа между колонками используется при расчете ширины колонок и их количества. Например, если указано только количество колонок (как в примере выше), то ширина рассчитывается так:

column-rule

• column-rule-color — цвет линии,
• column-rule-style — стиль линии,
• column-rule-width — ширина линии.

Важный момент: разделительная линия отрисовывается ровно посередине отступа между колонками, при этом не занимая места. Если вдруг разделительная линия оказывается больше по ширине, она начинает пересекаться с контентом:

Причем отрисовывается разделитель сразу после фона (background) контейнера.

Разрывы

Распределение контента по колонкам — еще одна интересная задача, требующая иногда тонкого управления. По умолчанию, контент — это сплошная «масса», весьма прямолинейным образом, перетекающая из одной колонки в другую. Но что делать, если, скажем, я хочу быть уверенным, что в конце колонки у меня не повиснет одинокий заголовок? Или если мое визуально-эстетическое чувство требует, чтобы цитата не разрывалась на несколько колонок или даже больше: единолично занимала целиком всю колонку?

• break-before — что должно происходить перед блоком контента,
• break-after — что должно происходить после блока контента,
• break-inside — что должно происходить внутри блока контента.

• break-before: auto, always, avoid, left, right, page, column, avoid-page, avoid-column
• break-after: auto, always, avoid, left, right, page, column, avoid-page, avoid-column
• break-inside: auto, avoid, avoid-page, avoid-column

Важный момент: на сегодня управление разрывами в колонках поддерживается только в Opera 11.10+, — что не удивительно, учитывая, что редактор спецификации Хокон Виум Ли, — и IE10.

Мои эксперименты со свежей версией Оперы и предварительной публичной версией IE10 показывают, что местами имеющиеся реализации отличаются друг от друга. Однако тут я затрудняюсь ответить, какой браузер ведет себя «правильней», так как спецификация хотя и содержит отдельный раздел, посвященный переполнению (overflow), все же оставляет некоторые нюансы на усмотрение браузера (например, позволяет появление дополнительных экстра-колонок при явном указании разрывов).

Растягивание на несколько колонок

Теперь, когда мы научились создавать колонки и немного управлять поведением контента, давайте научимся еще одному трюку — растягиванию контента на несколько колонок. Для этого есть специальное свойство: column-span, принимающее значения none и all.

Нас интересует второе значение. Оно выдергивает блок контента из общего многоколоночного потока и растягивает его на все колонки. При этом контент до этого элемента и контент после автоматически балансируются на все имеющиеся колонки.

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

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

Растягивание элементов на сегодня все еще не поддерживается в Firefox.

Заполнение

И последняя деталь, которой вы, наверняка, уже должны были озадачиться: а как, собственно говоря, браузер решает, как ему заполнять колонки?

Для ответа на этот вопрос спецификация вводит свойство column-fill. Заполнять можно сбалансированно (balance), — именно так делается по умолчанию, — стараясь выдержать одинаковую высоту колонок; либо автоматически (auto), заполняя колонки последовательно.

Сравните, вот так браузер балансирует по умолчанию:

А вот так в автоматическом последовательном режиме:

Управление заполнением на сегодня поддерживают только Internet Explorer и Opera.

Итоги

Прежде всего, продолжение повести А.П. Чехова «За яблочки» можно
найти в Викитеке.

По существу дела, следя за развитием веб-стандартов, в том числе по некоторым моим статьям про CSS3 (см. например, статью про CSS3 Grid Layout), я надеюсь, вы с не меньшим вдохновением смотрите на открывающиеся перед веб-разработчиками возможностями. Адаптивные, гибкие и мощные средства для управления размещением контента все ближе и доступнее. А решение сложных задач — все проще.

Интерактив

Поиграться с работой CSS3 Multi-column можно на ietestdrive.com:

Пробуйте, эксперементируйте. Сообщайте разработчикам браузеров о багах. И не забывайте продумать, что увидят пользователи старых (и вроде бы современных, но все еще не полностью поддерживающих стандарт) браузеров — например, можно использовать плагин для jQuery Columnizer. Помните об адаптивности и зрителях маленьких и больших экранов.

CSS решения. Создание сетки, колонок и гридов.

В данной статье поговорим о создании сеток в HTML. Разберём сетку в Twitter Bootstrap и приведём популярные решения для трёх случаев:

• old way — старый стиль, работающий во всех популярных браузерах;
• new way — современный стиль, работающий во всех современных браузерах (IE > 9) (twitter bootstrap 4);
• feature way — божественный стиль (будущий), работающий в прогрессивных браузерах.

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

Классические колонки с использованием float (old way)

Одна из самых популярных реализаций колонок была представлена в Twitter Bootstrap 3.

Принцип работы в следующем:

• Создаём родителя (row), для которого задаём отрицательные отступы margin слева и справа. (Это необходимо, чтобы колонки располагались по центру без необходимости указывать дополнительные классы первому и последнему элементам, чтобы выровнять колонки);
• Так как колонки будут располагаться с помощью плавающего свойства float, к родителю применяется утилита clearfix, которая позволит нормализовать высоту родителя и устранит нежелательные сайд эффекты;
• Все дочерние элементы (.col) родителя получают положительные отступы слева и справа с помощью padding. Для позиционирования также устанавливается свойство float: left ;
• Считается, что в сетке не может быть более 12 колонок, поэтому базовая ширина колонки равна 1/12, в пересчёте на проценты

Создадим следующую HTML структуру со следующими стилями:

Сначала мы объявили константы:

• old-columns — количество колонок
• old-gutter — расстояние между колонками

Для родителя задали отступы слева и справа, а также добавили clearfix :

Для колонок добавили отступы и базовые стили, общие для всех:

Для примера, мы используем селекторы атрибутов ([class^=’old-column-’]), но в продакшене, старайтесь их изберать.

Саму сетку создали средствами SCSS:

Которая в итоге сгенерирует набор классов с постфиксами от 1 до 12:

Откроем в браузере:

Для добавления адаптивности, необходимо добавить точки остановок (breakpoints)для нужных размеров, а также задать соответствующие суффиксы классам колонок:

Как видно, для задания размеров мы использовали коллекции (map) в SCSS и с помощью цикла обошли все размеры и сгенерировали нужные классы с нужными суффиксами. Подробнее о работе map’ов в документации SASS.

В результате получим:

На gif’ке видно, как колонки изменяются в зависимости от ширины экрана.

Полную реализацию колонок, вы можете посмотреть в исходниках Twitter Bootstrap 3 в репозитории.

Преимущества:

• Работает во всех популярных браузерах.

Недостатки:

• Невозможность лаконичной реализации дополнительной возможности — одинаковая высота колонок.

Как и ранее (в предыдущей статье — CSS решения. Фиксированный блок плюс адаптивный блок) лучшим решением является использование микро скрипта, который следит за изменением ширины блоков и обновляет высоту блоков.

Колонки с использованием flex (new way)

Более прогрессивным способ для создания колонок является использование flex .

Принцип работы заключается в следующем:

• Создаём родительский блок (.row) для которого указываем свойство display: flex . Так как колонки выстраиваются в линию и могут занимать больше 100%, для этого ставиться свойство flex-wrap: wrap ;
• Для создания корректных отступов задаём отрицательные margin-left и margin-right ;
• Для всех потомков первого уровня задаем свойства position: relative , которое гарантирует корректную обработку, width: 100% что позволит нормализовать свойства всех потомков и уравнять их права на доступную им ширину, а также отступы слева и справа с помощью padding ;
• Также создаются разные классы колонок (.col-1, .col-2, …), которые принимают соответствующие размеры в пропорции 1 к 12. В отличии от предыдущего решения, регулирование ширины колонок осуществляется с помощью свойств flex и max -width .

Создадим следующую структуру HTML и классы, описанные выше:

Как можно увидеть из реализации, решение почти совпадает с old-way.

Откроем в браузере:

Так как решение уже учитывает адаптивность изменим ширину браузера и посмотрим на результат:

Ознакомиться с полным решением можно в репозитории Twitter Bootstrap.

Добавим немного контента в колонки, чтобы посмотреть, что будет с высотой колонок:

Как видно из скриншота, все колонки получили высоту самой большой колонки.

Преимущества:

• Работает во всех современных браузерах (IE > 9)
• Колонки одинаковой высоты из «коробки»

Недостатки:

• Не работает в старых браузерах.

Создание сеток с помощью grid (feature way)

Последним решением является создание сеток средствами W3C — использование display: grid .

Принцип работы в следующем:

• Создаётся родительский блок, который будет сразу определять размеры и количество колонок. Блок получает свойство display: grid .
• Для задание строк используется свойство grid-template-rows , которое принимает доступные размеры строк. Например: 1fr — создаст сетку с 1 строкой; 1fr 2fr 1fr — создаст сетку с 3 строками, где средняя строка будет занимать 50% всей доступной высоты
• Для задания столбцов используется свойство grid-template-columns , которое принимает доступные размеры столбцов (аналогично grid-template-rows ).

Создадим сетку подобную тем, что приводились в примерах ранее:

Откроем в браузере:

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

Так как мы использовали единицы гибкости (fr), колонки получаются одинаковой высоты.

Если изменим ширину:

Стоит отметить, что принципы создания сеток отличаются от модели сеток используемых в Twitter Bootstrap, которые приводились ранее. В данном случае блок, который объявляет сетку уже заранее знает все свои свойства, поэтому дополнительно указывать классы не нужно.

Преимущества:

• Позволяет создавать сетки любой сложности.

Недостатки:

• Не работает в старых браузерах;
• Требует перестройки мышления по построению и использованию сеток.

Дополнение

Небольшая демонстрация работы всех трёх решений:

Резюме

В данной статье рассмотрели основные решения, используемые для создания сеток.