Центрирование в сетке CSS с колонкой фиксированной ширины - PullRequest
Новая
       45

Центрирование в сетке CSS с колонкой фиксированной ширины

2 голосов
/ 29 апреля 2020

Я пытаюсь сделать простую CSS центрированную сетку. Я знаю, что когда я использую justify-items: center, элементы внутри контейнера сетки должны выравниваться по горизонтали, но когда я задаю ширину столбца в пикселях, как это grid-template-columns: repeat(3, 100px), вся сетка возвращается к нормальной. Так есть ли способ сделать элементы сетки по центру, но в то же время указать ширину столбца в пикселях? Вот мой пример: 

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

.container {
    background-color: #aa96da;
    display: grid;
    justify-items: center;
    grid-gap: 20px;
    grid-template-rows: repeat(3, 1fr);

    /*Only if I change this 100px to '1fr' the justify-items will work */
    grid-template-columns: repeat(3, 100px);
}

.item {
    width: 100px;
    height: 100px;
    background-color: green;
}

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Короткий ответ : Вы хотите justify-content не justify-items

.container {
  background-color: #aa96da;
  display: grid;
  justify-content: center; /* -items to -content */
  grid-gap: 20px;
  grid-template-rows: repeat(3, 1fr);
  /*Only if I change this 100px to '1fr' the justify-items will work */
  grid-template-columns: repeat(3, 100px);
}

.item {
  width: 100px;
  height: 100px;
  background-color: green;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Длинный ответ:

Существует разница между элементом сетки и пространством, в котором он находится.

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

Элементы DOM следуют только за потоком сетки и размещаются соответственно, что мы можем изменить, используя такие свойства, как grid-column grid-row

Вы можете посмотреть на это так: enter image description here

Как вы можете видеть, есть The Grid container, The Grid, The Columns, The Rows, а затем The Grid items.

Элементы Grid живут в пересечение между двумя именованными The Grid Area (это делает сетку css лучше, чем flexbox в некоторых отношениях)

И justify-items выравнивает элементы сетки в этой области.

Итак grid-template-columns: repeat(3, 1fr); Это означает, что 3 столбца имеют ширину сетки, равномерно распределенную между ними.

Демо

Не смотрите на код просто превью 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

[grid] {
  height: 300px;
  display: flex;
  border: 2px solid;
  padding: 10px;
  flex-wrap: wrap;
}

[column] {
  flex: 1 0 calc(100% / 3);
  border: 2px solid;
  display: flex;
  flex-direction:column;
  align-items:center;
  
}

[column]>div {
  width: 100px;
  flex:1;
  background-color: green;
}
<div grid>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
</div>

Как вы можете видеть, столбцы сетки шире, чем элементы сетки 100px, что означает пространство для центрирования материала, поэтому justify-items: center; будет центрировать их внутри .

Вот почему похоже, что сетка центрирована, но это не причина, по которой изменение на grid-template-columns: repeat(3, 100px); нарушает ее.

В случае grid-template-columns: repeat(3, 100px);

Демо

Не смотрите на код, только предварительный просмотр 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

[ctr] {
  border: 2px solid;
  padding: 10px;
}

[grid] {
  height: 300px;
  width: 340px;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
}

[column] {
  flex: 0 0 100px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
}

[column]>div {
  width: 100px;
  flex: 1;
  background-color: green;
}
<div ctr>
  <div grid>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
  </div>
</div>

Как видно, ширина столбцов равна элементу сетки, поэтому все они плотно прилегают к столбцам, а сетка еще пуста.

0 голосов
/ 29 апреля 2020

Измените justify-items на justify-content, и оно должно работать. 

.container {
    background-color: #aa96da;
    display: grid;
    /* justify-items: center; */
    justify-content: center;
    grid-gap: 20px;
    grid-template-rows: repeat(3, 1fr);

    /*Only if I change this 100px to '1fr' the justify-items will work */
    grid-template-columns: repeat(3,  100px);
}

.item {
    width: 100px;
    height: 100px;
    background-color: green;
}
 <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
...