Question

我正在为一些盒子项目使用CSS网格。这看起来很好而且很好但是当我在容器中只有2个或1个盒子时使屏幕更小时，它在左边如何让它们始终位于中心？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

几乎在那里，使用justify-items 属性而不是justify-content：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

实际上我很傻，我已经弄明白了。所有这一切都是justify-self: center;的子项目，它的工作！我曾经想过，当文档谈论它时，它指的是内部的flex项目。那我虽然等哦？你不能证明自己是一个不在flex中的flex父亲！

如何使css网格项始终居中

2 个答案: