Сетка выравнивания по горизонтали не работает - PullRequest
Новая
       6

Сетка выравнивания по горизонтали не работает

3 голосов
/ 12 марта 2020 

.parent{
  border:1px solid red;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
}

.child{
  background:green;
  align-self:center;
}
<div class="parent">
  <div class="child" style="justify-self: center;">
    I am child
  </div>
</div>

Я ищу решение, позволяющее ребенку выравниваться по центру. так что я могу создать имя класса для left, right, and center будет использовать через.

Ответы [ 3 ]

2 голосов
/ 12 марта 2020

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

Есть несколько способов, к которым можно подойти, если вы хотите продолжать использовать CSS Grid для этой концепции макета. , Но проблема с сеткой из 12 столбцов состоит в том, что не будет «центра» без некоторого смещения или преобразований.

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

.parent{
  border:1px solid red;
  display:grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: 60px;
}

.center{
  background:green;
  grid-column: 7/8;
  grid-row: 1/2;
}
.left {
  background: red;
  grid-column: 1/2;
  grid-row: 1/2;
}
.right {
  background: blue;
  grid-column: 13/14;
  grid-row: 1/2;
}
<div class="parent">
  <div class="center">
    I am child
  </div>
  <div class="left">
    Me too
  </div>
  <div class="right">
    Also me
  </div>
</div>

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

.parent {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}

.center {
  background: green;
  order: 2
}

.left {
  background: red;
  order: 1
}

.right {
  background: blue;
  order: 3
}
<div class="parent">
  <div class="center">
    I am child
  </div>
  <div class="left">
    Me too
  </div>
  <div class="right">
    Also me
  </div>
</div>
1 голос
/ 13 марта 2020

Вот оптимизированная версия с гибкими значениями, которые могут работать с любым количеством столбцов.

Я рассмотрю CSS переменных, чтобы легко настроить шаблон и центральный элемент. Для левой и правой нам нужны только 1 и -1

.parent{
  --n:6;
  
  display:grid;
  grid-template-columns: repeat(calc(2*var(--n)), 1fr);
  grid-auto-flow:dense;
  margin:5px;
 outline:1px solid;
}

.left{
  grid-column-start:1;
}
.right{
  grid-column-end:-1;
  text-align:right;
}
.center {
  grid-column:calc(var(--n))/span 2;
  text-align:center;
}


.parent > * {
 border:1px solid red;
}
<div class="parent">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
  <div class="center">
    center
  </div>
</div>

<div class="parent" style="--n:3">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
  <div class="center">
    center
  </div>
</div>

<div class="parent" style="--n:10">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
  <div class="center">
    center
  </div>
</div>
0 голосов
/ 12 марта 2020 
.parent {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
...