css 密集群集布局

3pvhb19x 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(86)

我尝试创建一个像这样的密集集群，而不必手动移动HTML源代码：

下面是一个使用Flexbox的示例，但未订购源代码以使其具有高密度：

ul {
  max-width: 20ch;
  display: flex;
  flex-flow: row wrap;
}

li {
  list-style: none;
  outline: 2px solid #eee;
  border-radius: 1px;
  padding: 0.15em 0.3em;
  margin: 0.2em;
}

<ul>
  <li>Short</li>
  <li>Bit longer</li>
  <li>Much longer one</li>
  <li>Bit shorter</li>
  <li>Massive Long Super Scrumptious</li>
  <li>Smol</li>
  <li>Somewhat long</li>
</ul>

现在我知道，使用网格可以得到grid-auto-flow: row dense，但我不知道如何使项目具有内在的大小，而不是由网格指定--我认为这甚至是不可能的：
一个二个一个一个

css

来源：https://stackoverflow.com/questions/75754285/dense-cluster-layout

1条答案

按热度按时间

trnvg8h31#

尝试对网格项目使用以下属性：

<div class="wrapper">
      <div class="box1">Short</div>
      <div class="box2">Bit longer</div>
      <div class="box3">Much longer one</div>
      <div class="box4">Bit shorter</div>
      <div class="box5">Massive Long Super Scrumptious</div>
      <div class="box6">Smol</div>
      <div class="box7">Somewhat long</div>
    </div >

    .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 100px;
    }
    
    .box1 {
      grid-column-start: 1;
      grid-column-end: 1;
      grid-row-start: 1;
      grid-row-end: 1;
    }
    
    .box2 {
      grid-column-start: 2;
      grid-column-end:3;
      grid-row-start: 1;
      grid-row-end: 1;
    }
.box3 {
      grid-column-start: 1;
      grid-column-end:3;
      grid-row-start: 2;
      grid-row-end: 2;
    }
.box4 {
      grid-column-start: 1;
      grid-column-end:2;
      grid-row-start: 3;
      grid-row-end: 3;
    }
.box5 {
      grid-column-start: 3;
      grid-column-end: 3;
      grid-row-start: 3;
      grid-row-end: 3;
    }
.box6 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 3;
      grid-row-end: 4;
    }
.box7 {
      grid-column-start: 1;
      grid-column-end:2;
      grid-row-start: 4;
      grid-row-end: 4;
    }

了解更多here

赞(0）回复(0）举报 2023-03-20

我来回答

css 密集群集布局

1条答案

相关问题

热门标签

最新问答