Центрирование столбцов в CSS Grid

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

Есть ли способ создать служебный класс __centered, чтобы я мог применить его к центральным столбцам? Я знаю, что могу добавить пустой столбец div перед столбцом, но мне нужно более чистое решение.

.l-wrap {
  width: 100%;
  max-width: 1196px;
  margin: 0 auto;
}

.l-grid {
  display: grid;
  grid-gap: 52px;
  grid-template-columns: repeat(6, 1fr);
  background-color: orangered;
}
.l-grid--col {
  grid-column: auto/span 6;
}
.l-grid--col-1 {
  grid-column: auto/span 1;
  background-color: lightblue;
}
.l-grid--col-2 {
  grid-column: auto/span 2;
  background-color: lightblue;
}
.l-grid--col-3 {
  grid-column: auto/span 3;
  background-color: lightblue;
}
.l-grid--col-4 {
  grid-column: auto/span 4;
  background-color: lightblue;
}
.l-grid--col-5 {
  grid-column: auto/span 5;
  background-color: lightblue;
}
.l-grid--col-6 {
  grid-column: auto/span 6;
  background-color: lightblue;
}
<div class="l-wrap">
  <div class="l-grid l-grid__centered">
    <div class="l-grid--col-2">
      <p>This should span 2 and be centered.</p>
    </div>
  </div>
</div>


html css css-grid grid-layout
person eivindml    schedule 14.05.2017    source источник
comment
Чтобы внести ясность, я хочу создать служебный класс, очень похожий на класс .centered из Zurb Foundation: foundation.zurb.com/sites/docs/grid.html#centered-columns (кроме только сеток css)   -  person eivindml    schedule 14.05.2017

Ответы (1)


arrow_upward
5
arrow_downward

CSS Grid предоставляет justify-items и свойства justify-self , который можно использовать для выравнивания элементов сетки по оси строк.

justify-items относится к контейнеру сетки. justify-self применяется к элементам сетки.

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

.l-grid__centered {
    justify-self: center;
    grid-column: 1 / -1;
}

Это указывает элементу сетки центрироваться на строке в области сетки, охватывающей от первого до последнего столбца. (Отрицательные целые значения на grid-column и grid-row начинают отсчет с конечной стороны .)

.l-wrap {
  width: 100%;
  max-width: 1196px;
  margin: 0 auto;
}

.l-grid {
  display: grid;
  grid-gap: 52px;
  grid-template-columns: repeat(6, 1fr);
  background-color: orangered;
}
.l-grid--col {
  grid-column: auto/span 6;
}
.l-grid--col-1 {
  grid-column: auto/span 1;
  background-color: lightblue;
}
.l-grid--col-2 {
  grid-column: auto/span 2;
  background-color: lightblue;
}
.l-grid--col-3 {
  grid-column: auto/span 3;
  background-color: lightblue;
}
.l-grid--col-4 {
  grid-column: auto/span 4;
  background-color: lightblue;
}
.l-grid--col-5 {
  grid-column: auto/span 5;
  background-color: lightblue;
}
.l-grid--col-6 {
  grid-column: auto/span 6;
  background-color: lightblue;
}

    .l-grid__centered {
        justify-self: center;
        grid-column: 1 / -1;
    }
<div class="l-wrap">
  <div class="l-grid l-grid__centered">
    <div class="l-grid--col-2">
      <p>This should span 2 and be centered.</p>
    </div>
  </div>
</div>

демонстрация jsFiddle

ПРИМЕЧАНИЕ. Класс утилиты применяется к элементу сетки, а не к контейнеру сетки. Кроме того, этот метод разбивает область сетки с двумя столбцами исходного содержимого. Содержимое, расположенное по центру, сможет расширяться на всю строку.

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

.__centered {
  grid-column: 3 / span 2;
 }

OR

.__centered {
  grid-column: 3 / -3; 
 }


.l-wrap {
  width: 100%;
  max-width: 1196px;
  margin: 0 auto;
}

.l-grid {
  display: grid;
  grid-gap: 52px;
  grid-template-columns: repeat(6, 1fr);
  background-color: orangered;
}

.l-grid--col {
  grid-column: auto/span 6;
}

.l-grid--col-1 {
  grid-column: auto/span 1;
  background-color: lightblue;
}

.l-grid--col-2 {
  grid-column: auto/span 2;
  background-color: lightblue;
}

.l-grid--col-3 {
  grid-column: auto/span 3;
  background-color: lightblue;
}

.l-grid--col-4 {
  grid-column: auto/span 4;
  background-color: lightblue;
}

.l-grid--col-5 {
  grid-column: auto/span 5;
  background-color: lightblue;
}

.l-grid--col-6 {
  grid-column: auto/span 6;
  background-color: lightblue;
}

.l-grid__centered {
  grid-column: 3 / span 2;
  text-align: center;
}
<div class="l-wrap">
  <div class="l-grid">
    <div class="l-grid--col-2 l-grid__centered">
      <p>This should span 2 and be centered.</p>
    </div>
  </div>
</div>

демонстрация jsFiddle

ПРИМЕЧАНИЕ. Это решение центрирует только четные области сетки.

person Michael Benjamin    schedule 14.05.2017
comment
Да, оправдать себя: центр; кажется, тренируется довольно хорошо. Но мой редактор (vscode) еще не распознает его как официальный, и MDN показывает много знаков вопроса о совместимости браузера: developer.mozilla.org/en-US/docs/Web/CSS/justify-self. Можем ли мы все еще безопасно использовать его? - person Christof Kälin; 17.08.2017
comment
@ChristofKälin, проверьте caniuse.com, чтобы найти таблицы поддержки браузеров и, что более важно, протестируйте свой код в разных браузерах самостоятельно. - person Michael Benjamin; 26.06.2018
comment
я не мог понять, почему grid-column: 3 / span 2; делает его центральным, в то время как теоретически он должен начинаться на 3-й дорожке и охватывать 2 столбца, поэтому он должен заканчиваться на 5-й дорожке. не так ли? - person Shashank Bhatt; 15.03.2021