如何根据其中的内容有效地使 Grid 占用空间？答案

【问题标题】：How to efficiently make the Grid take space based on the content inside of it?如何根据其中的内容有效地使 Grid 占用空间？
【发布时间】：2019-10-22 17:34:49
【问题描述】：

这是 CSS Grid 比 flexbox 做得更好的一个典型例子。像这样的：

#container{
  display: flex;
  width:100%;
  height:100%;
}

#wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  outline: 1px solid red;
  width: 72%;
  height: 100%;
  padding: 24px 0px;
  box-sizing: border-box;
}

.item {
  background-color: yellow;
  height: 30px;
  margin: 15px;
  max-width:110px;
  border-radius: 8px;
  cursor: pointer;
}

 Here the cards looks good as the number of cards are more
<div id ="container">
  <div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>


<hr/>
we have so much white space between cards, how can we get rid of the space as the cards can be dynamic like 2 or 1. and a max of 3 per container
<div id ="container">
  <div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

我们如何才能在网格之间留出空间并使它们左对齐，以便它正确地适合顶部卡片，使用 Css 网格动态调整，或者有任何有效的方法来实现这一点。

注意 - 在这里阻止我的一件事是我们不能有一个固定的宽度，然后在 3 列处设置网格，因为我们不希望在调整容器大小时有空白

【问题讨论】：

你试过auto-fill而不是auto-fit吗？
是的，我做到了，但是在调整大小时它不适合并在容器右侧留下一个空白区域

标签： html css

【解决方案1】：

您可以删除 minmax(100px, 1fr) 并使用固定的列宽。这是一个例子：

#container {
  display: flex;
  width: 100%;
  height: 100%;
}

#wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  outline: 1px solid red;
  width: 72%;
  height: 100%;
  padding: 24px 0px;
  box-sizing: border-box;
}

.item {
  background-color: yellow;
  height: 30px;
  margin: 15px;
  max-width: 110px;
  border-radius: 8px;
  cursor: pointer;
}

Here the cards looks good as the number of cards are more
<div id="container">
  <div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>


<hr/> we have so much white space between cards, how can we get rid of the space as the cards can be dynamic like 2 or 1. and a max of 3 per container
<div id="container">
  <div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

【讨论】：

居中对齐并不能解决这里的目的，我觉得左对齐视图会更受用户欢迎
我没有改变对齐方式，只是网格列的大小。但如果你愿意，我可以编辑我的 sn-p
同样在 3 张卡片的情况下，当我们缩小时，我们不希望 div 的一侧有空白空间，因此我们也需要在这里考虑
我不确定我是否理解
在调整容器大小时，如果您观察到内部卡片占据了整个宽度并且不会留下任何空间，使其看起来不错。这也是我不想打破的难题的一部分

【解决方案2】：

您可以使用此代码

body {
  margin: 15px;
}

.three-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  outline: 1px solid red;
  width: 72%;
  height: 100%;
  padding: 24px 0px;
  box-sizing: border-box;
}

.l-wrap {
  margin-right: auto;
  margin-left: auto;
  display: flex;
}

.grid-item {
  margin-top: 0px;
  padding-left: 12px;
  padding-right: 12px;
  float: left;
}

.grid-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: yellow;
  height: 30px;
  margin: 15px;
  max-width: 200px;
  border-radius: 8px;
}

Here the cards looks good as the number of cards are more
<div class="l-wrap">
  <div class="three-col-grid">
    <div class="grid-item">
      <div class="grid-inner">Grid item</div>
    </div>
    <div class="grid-item">
      <div class="grid-inner">Grid item</div>
    </div>
    <div class="grid-item">
      <div class="grid-inner">Grid item</div>
    </div>
    <div class="grid-item">
      <div class="grid-inner">Grid item</div>
    </div>
    <div class="grid-item">
      <div class="grid-inner">Grid item</div>
    </div>
  </div>
</div>
<br><br>we have so much white space between cards, how can we get rid of the space as the cards can be dynamic like 2 or 1. and a max of 3 per container
<div class="l-wrap">
  <div class="three-col-grid">
    <div class="grid-item">
      <div class="grid-inner">Grid item</div>
    </div>
    <div class="grid-item">
      <div class="grid-inner">Grid item</div>
    </div>
  </div>
</div>

【讨论】：