Основные понятия Grid Layout
CSS Grid Layout представляет двумерную сетку для CSS. Grid (здесь и далее подразумевается CSS Grid Layout ) можно использовать для размещения основных областей страницы или небольших элементов пользовательского интерфейса. В этой статье описывается компоновка сетки CSS и новая терминология, которая является частью спецификации CSS Grid Layout Level 1. Функции, показанные в этом обзоре, будут более подробно описаны в остальной части данного руководства.
Что такое Grid?
Фиксированные и гибкие размеры полос
Расположение элемента
Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путём привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.
Создание дополнительных полос для хранения контента
Вы можете определить явную сетку с макетом сетки, но спецификация также касается контента, добавленного за пределами объявленной сетки, при необходимости добавляя дополнительные строки и столбцы. Включены такие функции, как добавление «столько столбцов, сколько будет помещено в контейнер».
Управление выравниванием
Grid содержит функции выравнивания, чтобы мы могли контролировать, как элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid.
Управление перекрывающимся контентом
Grid контейнер
Мы создаём grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.
В этом примере есть div, содержащий класс wrapper с пятью потомками
Сделаем wrapper grid контейнером
Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть Grid Inspector, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.
По мере вашего обучения и последующей работы с CSS Grid Layout этот инструмент даст вам лучшее визуальное представление о том, что происходит с вашей сеткой.
Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.
Grid Tracks
Можно дополнить пример выше, добавив свойство grid-template-columns и задав размеры полос колонок.
В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.
Единица измерения fr
Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины fr представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.
В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.
Задание треков с помощью нотации repeat()
можно записать вот так:
Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.
Явный и неявный грид
Масштабирование треков и minmax()
При задании размеров явного грида или при определении размеров автоматически создаваемых колонок или строк может возникнуть следующая ситуация: мы хотим определить для треков минимальный размер, но при этом быть уверенными, что при необходимости треки растянутся, чтобы вместить весь добавленный в них контент. Например, нам нужно, чтобы строки никогда не становились меньше 100 пикселей, но если контент занимает, скажем, 300 пикселей в высоту, мы хотим, чтобы строка тоже стала 300 пикселей.
Grid-линии
Размещение элементов по линиям
В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек.
Не забывайте, что вы можете использовать Grid Inspector в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.
Grid-ячейки
Grid-области
Зазоры (Gutters)
Вложенные гриды
Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трёхколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.
В данном случае вложенный грид не связан с родительским. Как вы можете видеть, он не наследует значение свойства grid-gap (en-US) родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.
Подгрид (Subgrid)
Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.
Размещение элементов с помощью z-index
Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:
Управление порядком отображения
Что дальше?
В данной статье мы очень кратко рассмотрели спецификацию Grid Layout. Поиграйте с примерами кода и переходите к следующей части нашего гида, где мы детально покопаемся в недрах CSS Grid Layout.
Начало работы с CSS Layout
Дата публикации: 2018-06-27
От автора: за последние несколько лет CSS Layout резко изменился, как и способ разработки интерфейса наших сайтов. Теперь у нас есть реальный выбор с точки зрения методов компоновки, которые мы используем в CSS для разработки наших сайтов, а это значит, что нам часто приходится выбирать, какой подход принять. В этой статье я расскажу о различных методах макета, которые вам доступны, объясняя основы того, как они используются и для чего они используются.
Это руководство для вас, если вы новичок в CSS и задаетесь вопросом, какой лучший способ выбрать к макету, но также, если вы опытный разработчик в другой области стека, который хочет убедиться, что ваше понимание макета сегодня актуально. Я не пытался полностью документировать каждый метод макета здесь, поскольку это создало бы книгу, а не статью. Вместо этого я даю обзор того, что доступно вам, с большим количеством ссылок, чтобы узнать больше.
Нормальный поток
Если вы берете HTML-страницу, на которой CSS не применяется для изменения макета, элементы будут отображаться в обычном режиме. В нормальном потоке окна отображаются один за другим в зависимости от режима записи документа. Это означает, что, если у вас есть режим горизонтальной записи, в котором предложения работают слева направо или справа налево, нормальный поток отображает блоки элементов уровня блока один за другим по вертикали вниз по странице.
Если вы находитесь в режиме вертикальной записи, тогда предложения выполняются вертикально, поэтому нормальный поток будет блокировать блоки горизонтально.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Изменение в блочном и встроенном направлениях с помощью режима записи
Обычный поток начинается с любого макета: при создании макета CSS вы берете блоки и заставляете их делать что-то отличное от обычного потока.
Структурируйте свой документ, чтобы воспользоваться обычным потоком
Вы можете воспользоваться нормальным потоком, гарантируя, что ваш документ начинается в хорошо структурированном виде. Представьте себе, что если вместо этой концепции нормального потока — браузер складывал все ваши поля вверх в углу друг над другом, пока вы не создали макет. Это означало бы, что вам нужно будет размещать все на странице. Вместо этого браузер отображает наш контент в удобном для чтения виде.
Если ваш CSS не загружается, пользователь все равно может прочитать содержимое, а пользователи, которые вообще не получают CSS (например, кто-то, кто использует программу чтения с экрана), будут доставлять контент в том порядке, в котором он находится в документе. Это делает важным с точки зрения доступности, что ваш HTML-документ начинает жизнь в хорошем состоянии; тем не менее, это также упростит вашу жизнь как веб-разработчика. Если ваш контент находится в том порядке, в котором пользователь будет читать его, вам не нужно будет делать значительные изменения в макете, чтобы получить его в нужном месте. С новыми методами компоновки вы можете быть удивлены, как мало вам нужно.
Поэтому, прежде чем думать о макете, подумайте о структуре документа и порядке, в котором вы хотите, чтобы ваш контент читался сверху страницы.
Уход от нормального потока
Когда у нас есть хорошо структурированный документ, нам нужно решить, как это сделать, и превратить его в наш желаемый макет. Это потребует отхода от нормального потока, для частей нашего документа. У нас есть целый набор методов компоновки. Первый метод, который мы рассмотрим — это float, так как float — отличная демонстрация того, что нужно для того, чтобы вывести элемент из нормального потока.
Floats
Floats используются для сдвига блока влево или вправо, позволяя отображать содержимое, обернутое вокруг него.
Используйте float свойство CSS и значение left или right, чтобы добавить элементу обтекание. По умолчанию значение float равно none.
Стоит отметить, что когда вы обтекаете элемент, а текст обтекает его, то происходит то, что линейные блоки этого содержимого сокращаются. Если вы обтекаете элемент, и в следующем поле, содержащем ваш текст, применен цвет фона, вы можете увидеть, что этот фоновый цвет будет выполняться под плавающим элементом.
Цвет фона в содержимом выполняется под float
По мере того, как вы сокращаете строковые поля, чтобы сделать пространство между float и текстом обертывания, вы должны установить отступ для плавающего элемента. Поля текста будут просто перемещать текст с края контейнера. Для изображения, расположенного слева, вы добавили бы поле справа и снизу, предполагая, что вы хотите, чтобы изображение закралось в верхнюю и левую части контейнера.
Очистка float
После того, как вы разместили элемент, все следующие элементы будут обтекать этот плавающий элемент до тех пор, пока они не упадут снизу и нормальный поток не будет продолжен. Если вы хотите предотвратить это, вам нужно очистить float.
На элементе, который вы хотите начать отображать после float, добавьте свойство clear со значением left, чтобы указать очистку элемента, расположенного слева, right, чтобы очистить элемент, плавающий вправо, или both, чтобы очистить любые float.
Вышеуказанный метод работает, если вы хотите, чтобы элемент запускался после float. Это не поможет, если вы окажетесь в ситуации, когда у вас есть плавающий элемент внутри блока, с некоторым текстом рядом. Если текст короче, чем плавающий элемент, поле будет рисоваться под содержимым и игнорировать float. Как мы уже узнали, float сокращает линейные поля, остальная часть макета продолжается в нормальном потоке.
Блок вокруг текста не очищает поплавок
Чтобы предотвратить эту ситуацию, нам нужно очистить что-то внутри блока. Мы могли бы добавить пустой элемент и установить это, чтобы очистить все. Это предполагает использование пустых div в нашем документе, что не является идеальным и может быть невозможным, если ваша страница создается CMS. Таким образом, типичный метод очищающих float — это то, что называется чистым исправлением. Этот метод работает, добавляя CSS-сгенерированный контент и устанавливая его для clear both.
Контекст форматирования блоков
Другой способ очистить float внутри поля — вызвать контекст форматирования блоков (BFC) на контейнере. Контекст форматирования блоков содержит все внутри него, которое включает в себя плавающие элементы, которые больше не могут вытолкнуть нижнюю часть окна. Существует несколько способов принудительного BFC, наиболее часто используемого при очистке float, чтобы установить свойство переполнения для значения, отличного от отображаемого по умолчанию.
Использование overflow таким образом, как правило, будет работать, однако, в определенных ситуациях вы можете получить обрезанные тени или нежелательные полосы прокрутки на элементе. Это также может выглядеть немного запутанным в вашей таблице стилей: вы установили переполнение, потому что вам нужны полосы прокрутки или просто для того, чтобы получить эту способность очистки?
Чтобы сделать намерение более ясным и предотвратить создание BFC, вызывающего нежелательные побочные эффекты, вы можете использовать flow-root как значение свойства display. Единственное, что display: flow-root делает, это создает BFC, тем самым очистив ваши float без каких-либо других проблем.
Использование устаревших float
До появления новых методов компоновки для создания макетов столбцов использовались float, этот метод работал, предоставляя набор элементов шириной и устанавливая их для размещения рядом друг с другом. Тщательное управление процентным размером этих плавающих блоков может создать эффект сетки.
Я бы не предложил начать новый дизайн и использовать этот метод. Тем не менее, он будет оставаться на существующих площадках на многие годы вперед. Поэтому, если вы сталкиваетесь с дизайном, где почти все, кажется, плавают, это используется в технике.
Позиционирование
Чтобы удалить элемент из обычного потока или сдвинуть его со своего места в нормальном потоке, вы можете использовать свойство position в CSS. Когда в нормальном потоке элементы имеют static position. Элементы отображаются один за другим в блочном измерении, и если вы прокручиваете страницу, которую они прокручивают вместе с ней.
При изменении значения position вы обычно также используете значения смещения, чтобы перемещать поле вокруг определенной точки отсчета. Используемая опорная точка зависит от значения используемой позиции.
Относительное позиционирование
Если позиция имеет position: relative то контрольная точка — это место, которое обычно было бы в нормальном потоке. Затем вы можете использовать значения смещения для свойств top, left, bottom и right, чтобы переместить поле, из которого оно обычно отображается.
Обратите внимание, что другие элементы на странице не отвечают на новую позицию вашего элемента. Место, где оно было размещено в нормальном потоке, зарезервировано, поэтому вам нужно управлять любыми перекрытиями самостоятельно.
Абсолютное позиционирование
Установите position: absolute значение для элемента, и он будет полностью удален из нормального потока. Пространство, оставшееся для него, будет удалено. Затем элемент будет располагаться относительно его содержащего блока, который, если он не вложен в другой позиционированный элемент, будет вьюпортом.
Поэтому первое, что произойдет, если вы установите position: absolute значение элемента — это то, что оно обычно заканчивается сверху и слева от окна просмотра. Затем вы можете использовать значения смещения для свойств top, left, bottom и right, чтобы переместить блок из этой позиции туда, где вы хотите.
Часто вы не хотите, чтобы блок располагался в соответствии с окном просмотра, но в отношении содержащего элемента он находится внутри. В этом случае вам нужно предоставить этому содержащему элементу значение позиции, отличное от статического значения по умолчанию.
В качестве установочного position: relative не удаляет элемент из обычного потока, это обычный выбор. Дайте родительскому элементу, что вы хотите установить смещения из position: relative, а затем смещать абсолютно позиционированный блок из границ этого элемента.
Фиксированное позиционирование
Что-то с position: fixed будет расположено в большинстве случаев относительно окна просмотра и удалено из потока документов, чтобы для него не было зарезервировано места. Когда страница прокручивается, фиксированный элемент остается в положении относительно окна просмотра, поскольку остальная часть содержимого в обычных прокрутках потока, как обычно.
Это может быть полезно для включения фиксированной панели навигации, которая остается на экране, например, пока прокручивается контент. Как и в случае с другими значениями позиционирования, вы можете вызывать перекрытия при выполнении этого, чтобы вы следили за тем, чтобы все содержимое могло быть прочитано и не попало за фиксированный элемент.
Чтобы позиционировать фиксированный элемент, отличный от соответствующего окна просмотра, вам необходимо иметь содержащий элемент с одним из свойств transform, perspective или filter установленным для чего-то другого, кроме значения по умолчанию для него. В этом случае этот элемент станет содержащим блоком, а ваши смещения связаны с этим блоком, а не с окном просмотра.
Прикрепленное позиционирование
Это способ создания популярного эффекта прокрутки навигационной панели с содержимым, а затем остановки в верхней части окна просмотра, чтобы оставаться на экране при прокрутке содержимого.
Flex Layout
Гибкая компоновка блоков (Flexbox) — это метод компоновки, разработанный для одномерной компоновки. Одномерное означает, что вы хотите выложить контент в строке или в виде столбца. Чтобы превратить ваш элемент в гибкий макет, вы используете свойство display со значением flex.
Прямые дети этого элемента становятся гибкими элементами, они выкладываются как ряд, выровненный по отношению к стартовому краю в линейном направлении.
Оси Flexbox
В приведенном выше примере я описал элементы как выровненные по отношению к начальному краю нашей строки в строчном направлении, вместо того, чтобы описывать их как выровненные слева. Наши элементы выложены подряд, потому что значение по умолчанию для свойства flex-direction является строковым, это создает строку в строчном направлении, направление, по которому выполняются предложения. Поскольку мы работаем на английском языке, слева направо, начало строки находится слева, и поэтому наши объекты начинаются там. Таким образом, значение направления flex-direction определяет основную ось Flexbox.
Поэтому поперечная ось проходит по главной оси под прямым углом. Если ваше flex-direction является строковым, а ваши элементы отображаются в строчном направлении, ваша поперечная ось работает в направлении «block». Если ваше flex-direction – column, то элементы работают в направлении блока, тогда ваша поперечная ось находится вдоль строки.
Если вы используете мышление с точки зрения основной и поперечной оси при работе с Flexbox, это облегчит многое.
Направление и порядок
Flexbox дает вам возможность изменять направление элементов на главной оси, используя значение flex-direction сгиба в row-reverse или row-reverse column-reverse.
Вы также можете изменить порядок отдельных элементов гибкости с помощью свойства order. Однако при этом вы должны проявлять большую осторожность, так как это может вызвать проблему для любого пользователя, который перемещается с помощью клавиатуры, а не мыши или сенсорного экрана, поскольку порядок вкладок документа будет соответствовать порядку, в котором находится содержимое. Дополнительную информацию см. в разделе ниже на Visual и Document Order.
Свойства Flex
Свойства flex — это то, как управлять отношениями гибких элементов вдоль основной оси. Три свойства: flex-grow, flex-shrink, flex-basis.
Они обычно используются в их сокращенной форме свойства flex, первое значение является flex-grow, второе flex-shrink и третье flex-basis.
Значение flex-basis дает размер, который будет иметь элемент перед тем, как произойдет рост или сжатие. В приведенном выше примере этот размер составляет 200 пикселей, поэтому мы дадим каждому элементу 200 пикселей пространства. Маловероятно, что наш контейнер будет аккуратно делить на 200 пикселей, и, таким образом, будет оставлено пространство или недостаточно места для всех элементов, если у каждого из них будет 200 пикселей. Свойства flex-grow и flex-shrink позволяют нам контролировать, что происходит с элементами, если для них слишком много или недостаточно места.
Если flex-grow настроен на любое положительное значение, тогда предмет может расти, чтобы занять место. Поэтому в нашем примере выше, после предоставления каждому элементу 200 пикселей, любое дополнительное пространство будет разделяться между элементами.
Если flex-shrink установлен на положительное значение, тогда элемент может сжиматься в ситуации, когда произойдет переполнение, если все элементы были предоставлены для их flex-basis. Если в нашем контейнере было недостаточно места в контейнере, каждый элемент уменьшал бы равное количество, чтобы уменьшить, пока все элементы не поместится в контейнере.
Значения flex-grow и flex-shrink могут быть любым положительным значением. Элементу с большим значением flex-grow будет дано больше свободного места в пропорции при выращивании, а при увеличении значения flex-shrink при сжатии будет удалено больше.
Понимание того, как эти свойства flex работают, действительно является ключом к пониманию Flexbox, а перечисленные ниже ресурсы предоставят вам все детали. Однако рассмотрите возможность использования Flexbox, когда у вас есть куча вещей, которые вы хотите растянуть и проглотить в контейнер в одном измерении. Если вы попытаетесь выстроить строки в строках и столбцах, вам понадобится Grid, и в этом случае Flexbox, вероятно, не является инструментом для работы.
Grid Layout
CSS Grid Layout был разработан как двумерный метод компоновки. Двумерное означает, что вы хотите разместить свой контент в строках и столбцах. Как и в случае с Flexbox, Grid Layout представляет собой значение display поэтому для начала использования Grid вы должны начать с display: grid на вашем контейнере, а затем настроить некоторые столбцы и / или строки, используя grid-template-columns grid-template-rows и grid-template-rows.
Thymeleaf: диалект Layout + Spring Boot 2
Установка
Нам нужно будет добавить стартовый пакет Thymeleaf к вашему Spring Boot pom:
Однако, начиная с Spring Boot 2, этого уже недостаточно. Pom диалекта не является частью Spring Boot, и мы должны добавить его самостоятельно:
В примерах кода также используется Bootstrap, поэтому необходимо также добавить веб-файлы:
В качестве последнего шага нам нужно создать bean-компонент LayoutDialect в аннотированном классе @Configuration.
Layout Dialect пример
Этот пример покажет, как мы можем использовать Layout Dialect, чтобы определить макеты для наших страниц, чтобы мы могли лучше использовать код повторно: с помощью страницы index.html, которая использует layout.html в качестве макета. Имя Layout.html — произвольное и может быть любым. Там добавлено еще несколько файлов, но они только для демонстрации.
На картинке структура папки ресурсов. Spring Boot автоматически найдет все шаблоны Thymeleaf в каталоге resources/templates.
Layout.html
В layout.html используются два из пяти процессоров, представленных в Layout Dialect. Во-первых, это макет: процессор шаблонов заголовков. Процессор шаблона заголовка помогает пользователю определить лучший заголовок для получающейся страницы. В этом примере он определяет окончательный заголовок как комбинацию заголовка страницы и заголовка макета. Для этого используются два специальных токена, представленных в Layout Dialect, $LAYOUT_TITLE и $CONTENT_TITLE.
Наибольшее значение в layout.html имеют два заполнителя (или фрагмента), определенных макетом: процессор фрагмента. Этот процессор позволяет нам определять заполнители контента в наших макетах. Содержимое этих заполнителей будет позже заменено содержимым страниц, использующих макет. В примере определены два разных фрагмента, один для боковой панели, а другой для основного контента. Мы, однако, можем иметь столько фрагментов, сколько пожелаем, при условии, что все они имеют разные имена.
Index.html
Мы заявляем, что index.html использует layout.html в качестве своего макета с процессором layout: decorate. Сделав это, мы объявляем, что index.html будет использовать шаблон layout.html. Здесь самое главное — использование процессора фрагментов. Он указывает содержимое, которое будет использоваться вместо содержимого фрагментов макета с тем же именем. Еще одна вещь, которую стоит упомянуть, это заголовок. На полученной странице index.html, которую мы получим, после обработки заголовок будет представлять собой комбинацию двух заголовков, один из index.html, а другой из макета. Они будут объединены.
Как layout.html, так и index.html можно просматривать в браузере без какой-либо обработки. Но после обработки мы видим, что index.html сильно отличается. Содержимое index.html используется для оформления макета и размещения содержимого внутри макета на основе того, что определяет макет.
В примере присутствуют два других элемента: верхний и нижний колонтитулы. Однако они используют процессоры Thymeleaf Standard Layout th:replace и th:insert. Очень похожи на последние два из пяти процессоров, представленных в Layout Dialect, layout:insert и layout:replace. Они более или менее делают то же самое. В отличие от предыдущих процессоров, которые мы обсуждали, эти два используют не иерархический, а включающий подход. Это больше характерно для типовой формы Thymeleaf.
