css - 如何让CSS网格项始终居中

Question

我正在对一些盒子元素使用 CSS 网格。这看起来不错，但是当我缩小屏幕时，当容器中只有 2 或 1 个盒子在左边时，我该如何让它们始终位于中心？

body {
  background-color: #8268EE; 
}

.item-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
  align-items: center;
}

.item {
  background-color: #BDD3FB;
  width: 200px;
  height: 200px;
}

<div class='item-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>

Answer 1

差不多就到了，使用 justify-items property 而不是 justify-content:

body {
  background-color: #8268EE; 
}

.item-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: center;
  justify-items: center;
}

.item {
  background-color: #BDD3FB;
  width: 200px;
  height: 200px;
}

<div class='item-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>