Как центрировать 2 столбца в шаблоне из 3 столбцов - PullRequest
Новая
       41

Как центрировать 2 столбца в шаблоне из 3 столбцов

0 голосов
/ 10 июля 2019

У меня есть раздел сетки, который имеет grid-template-column для 3 столбцов.Но этот контент загружается динамически, поэтому иногда он имеет 2 столбца.Я пытаюсь центрировать столбцы, когда есть только 2 столбца

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

.wrapper {
    grid-template-columns: repeat(3,1fr);
    display: grid;
    align-items: stretch;
}
.items {
    display: block;
}

Ответы [ 2 ]

1 голос
/ 10 июля 2019

Это то поведение, которое вы ожидали? Подробнее о flexbox: https://css -tricks.com / snippets / css / a-guide-to-flexbox / 

.parent {
  display: flex;
  justify-content: center;
}

/* Addition styling */
.parent {
 padding: 30px;
 background: lightgrey;
 opacity: 0.8;
}

.child {
 padding: 30px;
 text-align: center;
 background: black;
 margin: 10px;
 color: white;
 max-width: 300px;
}
<div class="parent">
  <div class="child">Column</div>
  <div class="child">Column</div>
</div>
<hr>
<div class="parent">
  <div class="child">Column</div>
  <div class="child">Column</div>
  <div class="child">Column</div>
</div>
<hr>
<div class="parent">
  <div class="child">Column</div>
  <div class="child">Column</div>
  <div class="child">Column</div>
  <div class="child">Column</div>
</div>
0 голосов
/ 10 июля 2019 

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-content: center;
  align-content: center;
}

.grid-container div {
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
</body>
</html>
...