Как выровнять grid контейнер по центру

Грид, флексбокс и выравнивание блоков: наша новая система раскладки

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

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

Примечание о поддержке в браузерах

На данный момент грид поддерживается при активации флага, а также в ночных сборках и сборках для разработчиков в Firefox, Safari, Chrome и Opera. Все, что вы увидите в статье, можно увидеть в работе, если вы активируете флаг или используете соответствующие сборки браузеров. Я стараюсь поддерживать в актуальном состоянии список поддержки грида в браузерах.

Новые значения свойства display

И grid , и flexbox являются новыми значениями для свойства display . Чтобы сделать элемент флекс-контейнером, мы используем display: flex , аналогично, чтобы сделать грид-контейнер, мы используем display: grid .

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

display: flex

В первом примере у нас есть три элемента в контейнере, которому задано display: flex . Это все, что на нужно, чтобы начать использовать флекбокс.

Пока мы не добавим другие значения свойств, начальные значения свойств флекс-контейнера следующие:

• flex-direction: row
• flex-wrap: no-wrap
• align-items: stretch
• justify-content: flex-start

Начальные значения для флекс-элементов:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

Мы взглянем на работу этих свойств и значений позднее. Сейчас нам достаточно задать родительскому элементу display: flex и флексбокс будет работать.

display: grid

Для раскладки элементов по сетке мы используем display: grid . Чтобы увидеть поведение грида, в примере будет использована раскладка с пятью картами.

Добавление display: grid не вносит драматических изменений, однако дочерние элементы теперь стали грид-элементами. Они расположились в одноколоночной полосе сетки, один под другим, сетка создала неявные строки для каждого элемента.

Мы можем сделать шаг вперед и сделать раскладку более похожей на сетку за счет добавления колонок. Для этого мы используем свойство grid-template-rows .

В следующем примере, я создала три колонки равной высоты используя новую единицу измерения в CSS, созданную специально для грида — fr . Это сокращение от fraction (доля), в данном случае это доля доступного пространства, которую должна занять колонка. Вы можете видеть, как наши грид-элементы сразу же расположились по сетке в каждой из клеток наших явно определенных столбцов. В сетке по-прежнему создаются незадаваемые явно строки: по мере заполнения доступных ячеек в колонках, строки добавляются для размещения оставшихся элементов.

Опять-таки, у нас есть определенное поведение по умолчанию. Мы не позиционировали какие-либо из этих грид-элементов, они сами размещали себя по нашей сетке, каждый в отдельную ячейку. Начальные значения для грид-контейнера следующие:

• grid-auto-flow: row
• grid-auto-rows: auto
• align-items: stretch
• justify-items: stretch
• grid-gap: 0

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

Выравнивание блоков

В этих двух примерах мы уже встретились со значениями, определенными в модуле выравнивания блоков. “Box Alignment Module Level 3” по сути отвечает за все выравнивания и распределения пространства, определенные в спецификации флексбокса и делает их доступными для других модулей. Поэтому, если вы уже используете флексбокс, то вы используете и выравнивание блоков.

Посмотрим, как выравнивание блоков работает в флексбоксе и гриде, а также на те проблемы, которые мы решаем с его помощью.

Колонки одинаковой высоты

Это то, что очень просто делалось во времена табличной раскладки, но чертовски сложно делать при помощи позиционирования и обтекания. Ниже, в примере с обтеканием, наши карты содержат разное количество контента. У нас нет способа указать другим картам, что они должны визуально соответствовать по высоте первой карте — так как у карт нет никаких связей друг с другом.

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

В примере с флексбоксом в наших элементах находится разное количество контента. Фон каждого из них выравнивается по линии, а не сидит за контентом, как это должно быть у плавающих элементов. Так как эти элементы выведены в ряд, их поведение контролируется свойством align-items . А для того, чтобы колонки были одинаковой высоты, значением этого свойства должно быть stretch — это начальное значение этого свойства.

То же самое мы видим и с раскладкой на гриде. Ниже показана простейшая из раскладок — две колонки (основной контент и боковая). Я опять использую единицы измерения fr : боковая колонка получит значение 1, а основной контент — 3. Фоновый цвет в боковой колонке доходит до того же края, что и контент в основной колонке. Опять, дефолтным значением для align-items является stretch .

Выравнивание в флексбоксе

Мы увидели, что значением по умолчанию для align-items в флексбоксе и гриде является stretch .

В флексбоксе при использовании align-items , мы выравниваем элементы внутри флекс-контейнера на пересекающихся осях. Основная ось определяется свойством flex-direction . В первом примере основной осью является ряд (горизонталь): мы растягиваем элементы на противоположной оси до высоты флекс-контейнера. В свою очередь высота флекс-контейнера это высота флекс-элемента с наибольшим количеством контента.

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

Вместо дефолтного значения stretch мы можем использовать и другие варианты:

• flex-start
• flex-end
• baseline
• stretch

Для управления выравниванием по основной оси, используйте свойство justify-content . Его значение по умолчанию flex-start , поэтому все элементы выровнены по левому краю. У нас есть выбор из следующих значений:

• flex-start
• flex-end
• center
• space-around
• space-between

Ключевые слова space-between и space-around особенно интересны. В случае со space-between , пространство оставшееся после укладки флекс-элементов равномерно распределяется между ними.

Использование space-around аналогично, за исключением того, что распределяется пространство, оставшееся с обеих сторон от элементов, а половинные промежутки помещаются в начало и конец.

Вы можете увидеть работу этих свойств и значений в демо:

Мы также можем вывести флекс-элементы как колонку, а не как ряд. Если мы изменим значение flex-direction на column , то основной осью станет колонка, а ряд станет поперечной осью — align-items по-прежнему в значении stretch , а элементы растягиваются на ширину ряда.

Если мы захотим выровнять их по началу флекс-контейнера, мы используем flex-start .

Выравнивание в гриде

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

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

Область грида это одна или более ячеек. В примере ниже, у нас есть четырехколоночная и четырехрядная сетка. Ряды отделены отступами в 10 пикселей и у нас есть три области грида, созданные с использованием позиционирования на основе линий. Мы позднее подробно рассмотрим такое позиционирование, сейчас скажу, что значение перед / это линия, с которой начинается контент, а значение после это место, где контент завершается.

Точечная граница фонового изображения помогает нам увидеть заданные области. Так в первом примере, каждая область использует дефолтное значение stretch для align-items на оси колонки и justify-items на оси ряда. Это значит, что контент растягивается для полного заполнения области.

Во втором примере, я изменила значение align-items в грид-контейнере на center . Мы также можем изменить это значение в отдельном грид-элементе при помощи свойства align-self . В этом случае, я задала значение center всем элементам , кроме второго, которому задано stretch .

В третьем примере, я снова поменяла значения justify-items и justify-self , задав соответственно center и stretch .

Во всех этих примерах контент выравнивался в областях грида, области определялись началом и окончанием линии грида.

Мы также можем выравнивать всю сетку внутри контейнера, если наши полосы занимают меньше пространства, чем контейнер, которому задано display: grid . В этом случае мы можем использовать свойства align-content и justify-content , как и в случае с флексбоксом.

В первом примере мы видим выравнивание по умолчанию, при котором колонки и ряды задаются в абсолютных величинах и занимают меньше пространства, чем позволяет их контейнер фиксированной ширины. Дефолтное значение для обоих start .

Чтобы сдвинуть полосы вправо вниз, мы изменим значение на end .

Также как и с флексбоксом, мы можем использовать space-around и space-between . Это может повлечь поведение, которое может быть нежелательным для нас, так как отступы в сетке станут шире. Однако, как вы можете видеть на изображении ниже и в третьем примере на Codepen, мы получаем те же отступы между полосами, которые у нас были с флексбоксом.

Полосы фиксированного размера получают дополнительное пространство, если они охватывают больше одной полосы. Элементы #2 и #4 в нашем примере шире, а #3 выше, так как они получили дополнительное пространство, которое предназначалось промежутку между полосами.

Мы можем полностью центрировать грид, задав align-content и justify-content значение center , как показано в последнем примере.

У нас есть отличные возможности выравнивания в флексбоксе и гриде и в целом они работают согласованно. Мы можем выровнять отдельные элементы и группы элементов так, чтобы они были отзывчивыми и не накладывались друг на друга — этого и не хватало вебу до настоящего времени.

Отзывчивость по умолчанию

В последнем разделе мы рассмотрели выравнивание. Свойства выравнивания блоков, используемые в раскладках на основе флексбокса и грида это одна из областей, где мы видим, что эти спецификации возникли в мире, где отзывчивый дизайн является общим принципом. Значения типа space-between , space-around и stretch позволяют добиться отзывчивости и равного распределения содержимого между элементами.

Однако здесь есть нечто большее. Отзывчивый дизайн часто заключается в сохранении пропорций. Когда мы рассчитываем колонки для отзывчивого дизайна, используя подход target ÷ context , представленный в статье Этана Маркотта “Fluid Grids”, мы поддерживаем пропорции оригинального дизайна в абсолютных величинах. Флексбокс и грид дают нам более простые способы работы с пропорциями в нашем дизайне.

Флексбокс дает нам путь к гибкости на основе приоритета контента. Мы видели это при использовании ключевого слова space-between для задания равномерных отступов между элементами. Сначала рассчитывается количество пространства между элементами, а затем оставшееся пространство в контейнере делится и используется для равномерного размещения элементов. Мы можем добиться большего контроля над распределением контента за счет свойств, которые мы можем применять к самим флекс-элементам:

• flex-grow
• flex-shrink
• flex-basis

Эти три свойства чаще указываются в короткой записью свойства flex . Если мы добавляем элементу flex: 1 1 300px , мы указываем, что свойство flex-grow равно 1 , то есть этот элемент может расширяться; flex-shrink равно 1 , это позволит элементам уменьшаться, а flex-basis равен 300 пикселям. Применение этих правил к нашей карточной раскладке даст следующий результат:

Наш flex-basis равен 300 пикселям и у нас три карты в ряду. Если флекс-контейнер шире 900 пикселей, тогда оставшееся пространство делится на три и распределяется поровну между элементами. Это потому что мы задали flex-grow равный 1 и наши элементы могут расти больше, чем задано flex-basis . Мы также задали flex-shrink равный 1 , а это значит, что если у нас не хватит места для трех колонок по 300 пикселей, их размер будет уменьшаться в равных долях.

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

Доступное пространство распределяется после того, как выделено место в соответствии с заданным flex-basis . Именно поэтому наш первый элемент не стал в три раза больше остальных, а просто занял три части оставшегося пространства. Вы увидите большее изменение, если зададите flex-basis:0 , в таком случае у нас не будет стартового значения, которое мы вычитаем из ширины контейнера. Соответственно, вся ширина контейнера будет распределена между элементами пропорционально.

Очень полезным инструментом, помогающим вам понять эти значения является Flexbox Tester. Передавайте ему различные значения и он рассчитает для вас итоговые значения, а также объяснит, почему они получились.

Если вы используете auto в качестве значения flex-basis , то в роли последнего будет использоваться любой доступный размер флекс-элемента. Если размеры не указаны, тогда в качестве дефолтного будет использовано значение content , то есть ширина контента. Поэтому использование auto очень полезно для многократно используемых компонентов, которым может понадобиться задание размера элемента. Вы можете использовать auto и быть уверенными, что если элемент должен быть определенного размера, то флексбокс обеспечит этот размер.

В следующем примере, я задала всем картам flex-basis: auto , а затем первой из них ширину в 350 пикселей. Таким образом flex-basis этой первой карты теперь равен 350 пикселям, у двух других он определяется шириной контента.

Если мы вернемся к нашему оригинальному flex: 1 1 300px , добавим еще элементов и зададим flex-wrap: wrap контейнеру, элементы будут укладываться настолько близко, насколько это можно при заданном значении flex-basis . Если у нас 5 изображений и 3 из них укладываются в один ряд, тогда оставшиеся 2 будут выведены на следующем. Так как элементам позволено расширяться, оба перенесенных элемента вырастут в равной мере и мы получим 2 равных увеличенных элемента снизу и 3 равных элемента сверху.

Часто возникает следующий вопрос: а как сделать так, чтобы элементы в нижнем ряду были такими же, как и в верхнем, оставляя после себя пустое пространство? С флексбоксом никак. Для такого поведения нужна раскладка на гриде.

Сохранение пропорций с помощью грид-раскладки

Грид, как мы уже видели обладает концепцией создания полос колонок и рядов, в которых позиционируются элементы. Когда мы создаем гибкую грид-раскладку, мы задаем пропорции при задании полос в грид-контейнере — именно полос, а не элементов, как в флексбоксе. Мы уже сталкивались со специальной единицей fr , когда создавали раскладку на гриде. Эта единица работает примерно также как flex-grow при flex-basis:0 . Она распределяет доли доступного пространства в грид-контейнере.

В следующем примере кода, первой полосе колонок было задан 2fr , двум другим 1fr . Таким образом, мы делим пространство на четыре части и даем две части первой полосе и по одной двум оставшимся.

Смешивание абсолютных единиц измерения и fr валидно. В следующем примере у нас будет полоса 2fr , полоса 1fr и полоса в 300 пикселей. Сначала вычитается абсолютная величина для третьей полосы, а затем оставшееся пространство делится на три, две части идут в первую полосу, а оставшаяся во вторую.

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

Хорошо то, что у нас по-прежнему есть способ создать столько колонок определенной величины, сколько влезет в контейнер. Мы можем сделать это с помощью синтаксиса grid и repeat .

В следующем примере я буду использовать синтаксис repeat для создания максимального количества двухсотпиксельных колонок, помещающегося в контейнере. Я использую синтаксис repeat для перечисления полос с ключевым словом auto-fill и задаваемым им размером.

На момент написания это не было имплементировано в Chrome, но работало в версии Firefox для разработчиков.

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

Таким образом мы совместим преимущества двумерной раскладки с гибким количеством полос — и все это без медиазапросов. Дальше мы рассмотрим расширение спецификаций флексбокса и грида. Там, где флексбокс прекращает распределять элементы в одном измерении, грид только начинает это делать.

Разделение порядка в разметке и визуального порядка элементов

С флексбоксом мы можем делать многое в плане позиционирования флекс-элементов. Мы можем выбрать направления, в котором они обтекают, задав flex-direction в значение row , row-reverse или column , column-reverse и мы можем задать порядок, контролирующий порядок вывода элементов.

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

Свойства grid-column и grid-row являются краткой записью следующего набора свойств: grid-column-start , grid-row-start , grid-column-end и grid-row-end . Значение перед / это линия, с которой начинается контент, а значение после — линия, на которой контент заканчивается.

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

У вас может быть несколько линий с одним именем и вы можете указывать их с помощью имени и индекса.

Вы можете использовать ключевое слово span , охватывая указанное число линий, например, до третьей линии с именем col . Этот тип позиционирования полезен для использования компонентов, размещающихся в разных местах раскладки. В примере ниже, я хочу чтобы некоторые элементы разместились на 6 полосах колонок, а оставшиеся заняли бы три полосы. Я использую авторазмещение для раскладки элементов, но когда грид встречает элемент с классом wide , стартовое значение будет auto , а конечное span 2 ; таким образом он начнется там, где и должен начать автоматически, но затем охватит две линии.

Использование авторазмещения с несколькими подобными правилами может оставить пробелы в вашей стеке, также в сетке могут появится элементы требующие двух полос при наличии только одной. По умолчанию грид продвигает вперед, поэтому как только она оставит пробел, она не будет возвращаться, чтобы заполнить его — если мы только не зададим grid-auto-flow: dense , в этом случае грид будет возвращаться для заполнения пробелов, беря контент в DOM-порядке.

Также есть отдельный метод позиционирования элементов в грид-раскладке — путем создания визуального представления раскладки напрямую в свойстве grid-template-areas . Для этого вам сначала надо присвоить имена всем прямым потомкам грид-контейнера, которые вы хотите позиционировать.

Затем мы располагаем элементы в манере ASCII-арта, указывая значение grid-template-areas . Если вы хотите полностью изменять раскладку с помощью медиазапросов, вам достаточно изменить только это свойство.

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

Последствия переупорядочения для доступности.

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

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

Грид-раскладка дает авторам возможность перестановки по всему документу. Однако это не является заменой корректной разметке исходников документа. Свойства упорядочивания и размещения по сетке не затрагивают невизуальные медиа (такие как речь). Кроме того, визуальное изменение порядка грид-элементов не влияет порядок прохода по ним в режиме последовательной навигации (например, по ссылкам).

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

Новая система для раскладки

Я не рассматривала каждый аспект флексбокса и грида в этой статье — моя цель состояла в том, чтобы показать сходства и различия в спецификациях и заодно рассказать о выравнивании блоков. Для демонстрации того, что эти спецификации принесли нам новую систему раскладки, соответствующую нуждам сайтов и приложений, которые мы создаем сейчас.

В настоящий момент флексбокс работает во всех основных браузерах, в то время как грид под флагом работает в Chrome, Opera, Safari и Firefox. Флексбокс изначально работал с префиксной версией, которая использовалась разработчиками, но затем он изменился, оставив нас с ощущением, что мы не можем полагаться на него. Грид разрабатывался под флагом и если вы посмотрите примеры в статье с активированным флагом, вы заметите, что имплементации уже очень совместимы. На данный момент спецификация находится в статусе кандидата в рекомендации. Поэтому когда грид выйдет в работу (это ожидается в начале следующего года) у него будет солидная кроссбраузерная поддержка.

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

Ресурсы

Вот некоторые ресурсы, которые помогут вам глубже исследовать спецификации:

• “The Flexbox Reading List: Techniques and Tools,” Cosima Mielke, Smashing Magazine
• Grid by Example, Rachel Andrew
• “Grid Resources” (список), Grid by Example, Rachel Andrew
• “CSS Grid Layout Examples,” Igalia
• “A Complete Guide to Grid,” CSS-Tricks
• “Laying Out The Future With Grid And Flexbox” (видео), Rachel Andrew, Mozilla Hacks
• The Experimental Layout Lab of Jen Simmons
• Полное руководство по Flexbox
• Подробно о размещении элементов в грид-раскладке (CSS Grid Layout)

Полное руководство по CSS Grid

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

CSS Grid Layout (aka «Grid») — это двумерная система компоновки основанная на сетке, цель которой заключается в том чтобы полностью изменить способ проектирования пользовательских интерфейсов основанных на сетке. CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), позиционирование и инлайновые блоки (inline-block), но все эти методы по существу являются просто хаками и опускают много важных функциональных возможностей (например, вертикальное выравнивание). Flexbox помог, но он предназначен для более простых одномерных макетов, а не для сложных двумерных (на самом деле Flexbox и Grid очень хорошо работают вместе). CSS Grid’ы — это первый модуль созданный специально для решения проблем компоновки, которые до сих пор мы решали с помощью хаков при создании сайтов.

Перед тем как мы погрузимся в концепцию Grid’ов, важно понимать её терминологию. Так как используемые здесь термины концептуально похожи, их довольно легко перепутать друг с другом, если с самого начала не запомнить их значения, определённые в спецификации.

Контейнер сетки

Элемент к которому применяется display: grid. Это прямой родитель для всех элементов сетки. В этом примере container является контейнером.

Элемент сетки

Дочерние элементы (прямые потомки) контейнера. Здесь item это элемент сетки, но не sub-item.

Линия сетки

Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными («линии колонок») или горизонтальными («линии строк») и располагаться по обе стороны от строки или столбца.

Трек сетки

Пространство между двумя соседними линиями. Вы можете думать об этом как о столбцах или строках сетки.

Ячейка сетки

Пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная «единица измерения» сетки.

Область сетки

Общее пространство окружённое четырьмя линиями. Область может состоять из любого количества ячеек.

Свойства для контейнера:

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

Свойства для элементов:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

Свойства для родительского элемента (Контейнера сетки)

— display

Определяет элемент как контейнер и устанавливает новый контекст форматирования сетки для его содержимого.

• grid — формирует сетку как блок;
• inline-grid — формирует сетку как инлайновый блок;
• subgrid — если ваш контейнер это ещё и элемент (вложенная сетка), то вы можете использовать это свойство для обозначения того, чтобы размеры строк/колонок были взяты из родительского элемента, а не определяли собственный;

.container

— grid-template-columns / grid-template-rows

Определяет колонки и строки сетки с помощью списка значений разделённого пробелами. Значения представляют из себя размер трека, а пробелы между ними представляют линии сетки.

• — может быть фиксированным размером, процентами или частью свободного пространства в сетке (определяется с помощью единицы fr (fraction));
• — произвольное имя на ваш выбор;

.container < grid-template-columns: . |  . ; grid-template-rows: . |  . ; >

— grid-template-areas

Определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area. Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.

• — имя области заданное с помощью grid-area;
• . — точка обозначающая пустую ячейку;
• none — области не определены;

.container < grid-template-areas: "| . | none | . " ". "; >

— grid-template

Сокращение для grid-template-rows, grid-template-columns, и grid-template-areas.

• none — устанавливает все три свойства в их начальное значение;
• subgrid — устанавливает grid-template-rows и grid-template-columns в subgrid, и grid-template-areas в его начальное значение;
• / — устанавливает grid-template-columns и grid-template-rows в определённое значение, соответственно, и устанавливает grid-template-areas в none;

.container < grid-template: none | subgrid | / ; >

— grid-column-gap / grid-row-gap

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

.container < grid-column-gap: ; grid-row-gap: ; >

— grid-gap

Сокращение для grid-row-gap и grid-column-gap.

.container < grid-gap: ; >

— justify-items

Выравнивает содержимое вдоль оси строки (в отличии от align-items который выравнивает элементы вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера.

• start — выравнивает содержимое по левой стороне области;
• end — выравнивает содержимое по правой стороне области;
• center — выравнивает содержимое по центру области;
• stretch — заполняет всю ширину области (по умолчанию);

.container

— align-items

Выравнивает содержимое вдоль оси столбца (в отличии от justify-items который выравнивает элементы вдоль оси строки). Это значение применяется ко всем элементам сетки внутри контейнера.

• start — выравнивание элементов по верхней части области;
• end — выравнивание элементов по нижней части области;
• center — выравнивание элементов по центру области;
• stretch — заполняет всю высоту области (по умолчанию);

.container

— justify-content

Иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки заданы фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца).

• start — выравнивает сетку по левой стороне контейнера;
• end — выравнивает сетку по правой стороне контейнера;
• center — выравнивает сетку по центру контейнера;
• stretch — масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера;
• space-around — одинаковое пространство между элементами, и полуразмерные отступы по краям;
• space-between — одинаковое пространство между элементами, без отступов по краям;
• space-evenly — одинаковое пространство между элементами, и полноразмерные отступы по краям;

.container

— align-content

Иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки зада фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси колонки (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).

• start — выравнивает сетку по верхней части контейнера;
• end — выравнивает сетку по нижней части контейнера;
• center — выравнивает сетку по центру контейнера;
• stretch — масштабирует элементы чтобы сетка могла заполнить всю высоту контейнера;
• space-around — одинаковое пространство между элементами, и полуразмерные отступы по краям;
• space-between — одинаковое пространство между элементами, без отступов по краям;
• space-evenly — одинаковое пространство между элементами, и полноразмерные отступы по краям;

.container

— grid-auto-columns / grid-auto-rows

Определяет размер любых автоматически созданных треков (иначе говоря, неявных треков). Неявные треки создаются при явном позиционировании столбцов и строк (через grid-template-rows / grid-template-columns), которые находятся за пределами заданной сетки.

• — может быть фиксированным размером, процентами, или частью свободного пространства в сетке (с использованием единицы fr);

.container < grid-auto-columns: . ; grid-auto-rows: . ; >

— grid-auto-flow

Если у вас есть элементы, которые вы явно не позиционируете в сетке, запускается алгоритм авто-размещения, чтобы их автоматически разместить. Это свойство контролирует то, как алгоритм авто-размещения работает.

• row — говорит алгоритму авто-размещения заполнять каждую строку поочерёдно, добавляя новые строки при необходимости;
• column — говорит алгоритму авто-размещения заполнять каждую колонку поочерёдно, добавляя новые колонки при необходимости;
• dense — говорит алгоритму авто-размещения попытаться заполнить дыры в сетке, если более мелкие элементы появляются позже;

.container

— grid

Сокращение для настройки всех следующих свойств: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow. Он также настраивает grid-column-gap и grid-row-gap на их начальные значения, даже если они не могут быть явно заданы этим свойством.

.container < grid: none | / | [ [/ ]]; >

Свойства для дочерних элементов (Grid элементы)

— grid-column-start / grid-column-end / grid-row-start / grid-row-end

Определяют местоположение в сетке ссылаясь на конкретные линии. grid-column-start/grid-row-start — это линия с которой начинается элемент, а grid-column-end/grid-row-end — это линия на которой элемент заканчивается.

• — может быть числом ссылающимся на пронумерованную линию, или названием ссылающимся на именованую линию;
• span — элемент, который будет охватывать предоставленное количество треков;
• span — элемент будет будет охватывать пока не достигнет линии с указанным названием;
• auto — указывает автоматическое размещения, автоматическое охват, или охват по умолчанию;

.item < grid-column-start: | | span | span | auto grid-column-end: | | span | span | auto grid-row-start: | | span | span | auto grid-row-end: | | span | span | auto >

— grid-column / grid-row

Сокращение для grid-column-start + grid-column-end, и grid-row-start + grid-row-end, соответственно.

• / — каждый из них принимает тоже самое, что и в длинной версии, включая охват;

.item < grid-column: / | / span ; grid-row: / | / span ; >

— grid-area

Даёт название элементу чтобы можно было ссылаться на него с помощью шаблона созданного через grid-template-areas свойство. В качестве альтернативы, это свойство может быть использовано в качестве сокращения для grid-row-start + grid-column-start + grid-row-end + grid-column-end.

• — название, которое вы выберите;
• / / / — может быть нумерацией или названиями линий;

.item < grid-area: | / / / ; >

— justify-self

Выравнивает содержимое элемента вдоль оси строки (в отличии от align-self, который выравнивает вдоль оси столбца). Это значение применяется к содержимому внутри отдельного элемента.

• start — выравнивает содержимое по левой части области;
• end — выравнивает содержимое по правой части области;
• center -выравнивает содержимое по центру области;
• stretch — заполняет всю ширину области (по умолчанию);

.item

— align-self

Выравнивает содержимое элемента вдоль оси столбца (в отличии от justify-self, который выравнивает вдоль оси строки). Это значение применяется к содержимому внутри отдельного элемента.

• start — выравнивает содержимое по верхней части области;
• end — выравнивает содержимое по нижней части области;
• center -выравнивает содержимое по центру области;
• stretch — заполняет всю высоту области (по умолчанию);

Как разместить grid элементы по центру?

Нужно что бы черные квадраты стали по центру, либо что бы между ними стали одинаковые отступы, как это сделать?

Отслеживать
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак
задан 27 дек 2017 в 21:37
uzi_no_uzi uzi_no_uzi
2,186 2 2 золотых знака 17 17 серебряных знаков 50 50 бронзовых знаков
как и при display: flex — используем justify-content: center.
27 дек 2017 в 22:00

3 ответа 3

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

justify-content: center; Странно, правда? )

.container < display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 280px)); grid-column-gap: 18px; grid-row-gap: 20px; border: 1px solid red; justify-content: center; >.children

Отслеживать
ответ дан 28 дек 2017 в 5:40
Andrei Fedorov Andrei Fedorov
5,793 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак
У меня не работало это свойство по какой-то непонятной причине
28 дек 2017 в 8:32

У меня тоже не работало, а вот это заработало

justify-items: center; 

Отслеживать
28.6k 19 19 золотых знаков 58 58 серебряных знаков 136 136 бронзовых знаков
ответ дан 12 мар 2020 в 14:30
Андрей Величко Андрей Величко
31 1 1 бронзовый знак

Мне нравиться больше вот так:

height: 100vh; display: grid; place-items: center; 

height: 100vh; display: grid; place-content: center; 

Можно задавать два значение, выравнивая по горизонтали или вертикали!

А для отступов подойдёт:

gap: 10px; 

Отслеживать
ответ дан 1 фев в 18:50
Nikita Shpikin Nikita Shpikin
11 3 3 бронзовых знака

• html
• css
• css-grid

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Выравнивание блоков в CSS разметке Grid

Если вы знакомы с flexbox, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием Box Alignment Level 3. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.

Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера ещё не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.

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

Две оси grid layout

При работе с раскладкой сетки у вас есть две оси для выравнивания объектов — оси блока или столбца, оси inline или строки. Ось блока — это ось, на которой блоки выложены в макете блока. Если у вас есть два абзаца на вашей странице, они отображаются один под другим, поэтому в этом направлении мы описываем ось блока. В спецификации CSS Grid Layout она называется осью столбца, так как это ось, по которой выполняются наши дорожки столбцов.

Внутренняя ось (inline axis) проходит по оси блока, это направление, в котором выполняется регулярный поток строк. В спецификации CSS Grid Layout его иногда называют осью строки, являющейся осью, по которой идут наши дорожки.

Мы можем выровнять содержимое внутри областей сетки и сетка отслеживает себя на этих двух осях.

Выравнивание элементов на блоке или столбце по оси

Элементы управления align-self и align-items на оси блока. Когда мы используем эти свойства, мы меняем выравнивание элемента в области сетки, которую вы поместили.

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

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

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

Свойство align-items устанавливает свойство align-self для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.

В следующем примере я использую свойство align-self , чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения start , третий end и четвёртый center .

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; > .item1  grid-area: a; > .item2  grid-area: b; align-self: start; > .item3  grid-area: c; align-self: end; > .item4  grid-area: d; align-self: center; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Элементы с внутренним соотношением сторон

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

Это поведение было уточнено в спецификации, при этом браузеры ещё не реализовали правильное поведение. Пока это не произойдёт, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путём установки align-self и justify-self (en-US) start . Это будет имитировать правильное поведение после его реализации.

Justifying Items on the Inline or Row Axis

Поскольку align-items и align-self обрабатывают выравнивание элементов на оси блока, justify-items и justify-self (en-US) выполнить ту же работу на оси inline или row. Значения, которые вы можете выбрать, такие же, как для align-self .

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

Вы можете увидеть тот же пример, что и для align-items ниже. На этот раз мы применяем свойство justify-self (en-US).

Опять же, значение по умолчанию stretch , за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените её, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; > .item1  grid-area: a; > .item2  grid-area: b; justify-self: start; > .item3  grid-area: c; justify-self: end; > .item4  grid-area: d; justify-self: center; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Как и align-self и align-items , вы можете применить justify-items к контейнеру сетки, чтобы установить значение justify-self (en-US) для всех элементов.

Свойства justify-self (en-US) и justify-items не реализованы в flexbox. Это связано с одномерным характером flexbox и может быть несколько элементов вдоль оси, что делает невозможным оправдание одного элемента. Чтобы выровнять элементы вдоль основной, встроенной оси в flexbox, вы используете свойство justify-content .

Center an item in the area

Объединив свойства align и justify, мы можем легко центрировать элемент внутри области сетки.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-auto-rows: 200px; grid-template-areas: ". a a ." ". a a ."; > .item1  grid-area: a; align-self: center; justify-self: center; > 

div class="wrapper"> div class="item1">Item 1div> div> 

Aligning the grid tracks on the block, or column, axis

Если у вас есть ситуация, когда ваши дорожки сетки используют область, которая меньше, чем контейнер сетки, вы можете выровнять трассы сетки самостоятельно внутри контейнера. И снова это работает на блочной и встроенной осях с align-content выравниванием дорожек на оси блока и justify-content , выполняющим выравнивание по встроенной оси. Значения для align-content и justify-content :

• normal
• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly
• baseline
• first baseline
• last baseline

В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

Свойство align-content применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки start , поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Если я добавлю align-conten в мой контейнер со значением end , все треки перейдут в конечную строку контейнера сетки в размерности блока:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: end; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Мы также можем использовать значения для этого свойства, которые могут быть знакомы с flexbox; значения пространственного распределения space-between , space-around и space-evenly . Если мы обновим align-content до space-between , вы увидите как выглядят элементы на нашем пространстве grid:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: space-between; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

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

В приведённом ниже изображении я поместил сетку с align-content , со значением start рядом с сеткой, когда значение align-content имеет значение space-between . Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

Justifying the grid tracks on the row axis

На оси inline мы можем использовать justify-content для выполнения того же типа выравнивания, что мы использовали align-content для оси блока.

Используя тот же пример, я устанавливаю justify-content space-around . Это снова вызывает дорожки, которые охватывают более одного столбца, чтобы получить дополнительное пространство:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: space-between; justify-content: space-around; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Alignment and auto margins

Другой способ выравнивания элементов внутри их области — использовать автоматические поля. Если вы когда-либо центрировали ваш макет в окне просмотра, установив правое и левое поле блока контейнера в auto , вы знаете, что автоматическая маржа поглощает все доступное пространство. Установив маржу в auto с обеих сторон, она выдвигает блок в середину, так как оба поля пытаются взять все пространство.

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; > .item1  grid-area: a; margin-left: auto; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Вы можете видеть, как элемент выравнивается с помощью Firefox Grid Highlighter (en-US) :

Alignment and Writing Modes

Во всех этих примерах я работал на английском языке, который является языком слева направо. Это означает, что наши стартовые линии находятся сверху и слева от нашей сетки, когда мы думаем в физических направлениях.

CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справа налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для justify-content: start будет состоять в том, что треки сетки начинаются с правой стороны сетки.

Однако, если вы устанавливаете автоматические поля, используя margin-right или margin-left , или абсолютно позиционирующий элемент, используя top , right , bottom and left смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.