主页 / coding / 问题 / 76925709
Accepted
mr.boris
Asked: 2023-08-18 07:55:23 +0800 CST

CSS 网格：包裹并适合内容

  • 772

我想包装我的列表，同时使其适合如下内容：

在此输入图像描述

问题是每个元素必须适合其内容的宽度。

我已经找到了如何包装固定大小的项目的 示例，但它对我的情况没有帮助：grid-template-columns: repeat( 12, minmax(250px, 1fr) );

我尝试了几种组合，但没有成功，列表要么固定在一行，要么元素相互重叠。我也找不到这个案例的任何好的例子。

<style>
.container {
  width: 450px;
  padding: 5px;
  border: 1px solid black;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat( auto-fit, minmax(min-content, 30px) );
}
.item {
  padding: 5px;
  border: 1px solid black;
  border-radius: 7px;
  white-space: nowrap;
}
</style>
<div class="container">
  <div class="item">First item</div>
  <div class="item">Second item</div>
  <div class="item">Some text here</div>
  <div class="item">Example</div>
  <div class="item">Wrapped item</div>
  <div class="item">Another wrapped item</div>
</div>

这就是我现在得到的：

在此输入图像描述

css

1 个回答

  1. Best Answer

    网格产生行和列，就像电子表格一样。您想要的布局最好使用弹性盒来实现。

    .container {
  width: 450px;
  padding: 5px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.item {
  padding: 5px;
  border: 1px solid black;
  border-radius: 7px;
  white-space: nowrap;
}
    <div class="container">
  <div class="item">First item</div>
  <div class="item">Second item</div>
  <div class="item">Some text here</div>
  <div class="item">Example</div>
  <div class="item">Wrapped item</div>
  <div class="item">Another wrapped item</div>
</div>

    • 1

相关问题