如何使CSS Grid行高灵活

pdsfdshx 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(163)

我正在创建一个CSS网格布局，我无法获得“auto”值来调整行高。
物品保持最小高度1fr，即使它们的内容小到足以让它们缩小。我写了一些文字在我的孩子div，但我得到了很多空间之间的行和列。
我想创建一个3父div：A B C，每个父级都有一个网格系统作为子级，当我从服务器获得A1时，我必须把它放在A列中，B1放在B列中，以此类推，但是当我在同一列中获得超过3个子级时，我应该在父级中创建另一个列，我正在尝试使用css网格，但我不知道如何实现这个机制。这就是我所尝试的：

.container {
    display: grid;
    grid-template-columns: 1fr;
    background: #faf;
    border-radius: 5px;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    width: fit-content;
  }

  .item {
    color: #fff;
    padding: 15px;
    margin: 5px;
    background: #3db5da;
    border-radius: 3px;
    width: 90px;
    height: fit-content;
  }

<div class="container">
  <div class="item">
    Item 1
    <p>Hi, I'm a test</p>
  </div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

结果是这样的：

我想删除项目之间的空间，无论内容是什么。
我正在尝试显示：flex，但目前它不能按预期工作
预期输出：

css

来源：https://stackoverflow.com/questions/76532827/how-to-make-css-grid-row-height-flexible

3条答案

按热度按时间

332nm8kg1#

这看起来更像是一个多列布局，而不是一个网格，因为当动态添加内容时，需要调整布局。例如，与所有其它列相比，第一列中可能具有如此多的文本，以至于它单独占据第一列。
此代码片段显示了使用CSS列计数而不是网格的布局。

<style>
  .container {
    background: #faf;
    border-radius: 5px;
    width: fit-content;
    column-count: 2;
    padding: 10px;
    font-size: 10px;
  }
  
  .item {
    color: #fff;
    padding: 15px;
    margin: 5px;
    background: #3db5da;
    border-radius: 3px;
    width: 90px;
    height: fit-content;
    box-sizing: border-box;
  }
  
  .item:first-child {
    margin-top: 0;
  }
</style>
<div class="container">
  <div class="item">
    Item 1
    <p>Hi, I'm a test</p>
  </div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

注意：为了让演示得到与问题中所示相同的布局，我必须将font-size减小到默认大小，至少在我的浏览器上，p元素必须跨越两行。我想这只是一个简单的多列工作原理的例子。这将总体上最小化容器的高度。

赞(0）回复(0）举报 2023-06-25

gab6jxml2#

你可以使用display：block和column-count吗？看起来支撑得很好
HTML：

<div class="container">
  <div class="item">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </div>
  <div class="item">
    <p>Paragraph 1</p>
  </div>
  <div class="item">
    <p>Paragraph 1</p>
  </div>
  <div class="item">
    <p>Paragraph 1</p>
  </div>
  <div class="item">
    <p>Paragraph 1</p>
  </div>
  <div class="item">
    <p>Paragraph 1</p>
  </div>
</div>

CSS：

.container {
  column-count: 2;
  column-gap: 10px;
}

.item {
  border: 1px solid black;
  margin-bottom: 10px;
  break-inside: avoid;
}

.item:last-child {
  margin-bottom: 0;
}

https://jsfiddle.net/7bvmp3hu/1/

赞(0）回复(0）举报 2023-06-25

x759pob23#

我还在学习英语，所以如果我犯了任何错误，我道歉。据我所知，问题是物品的高度没有正确降低，对吗？发生这种情况是因为您将height的值设置为fit-content和一个非常大的15 px填充。我将填充改为5 px，而不是高度：fit-content，我使用min-height：fit-content。

.item {
  color: #fff;
  padding: 3px;
  margin: 5px;
  background: #3db5da;
  border-radius: 3px;
  width: 90px;
  min-height: fit-content;
}

Image
这是你要找的吗，还是我迷路了？

赞(0）回复(0）举报 2023-06-25

我来回答

如何使CSS Grid行高灵活

3条答案

相关问题

热门标签

最新问答