html - 孤立的内联 Div

Question

我有一系列内联 block div，它们可以根据给定时间浏览器的宽度换行到第二行。这是一个 fiddle example .例如，它可能看起来像这样:

但是，如果视口(viewport)具有一定的宽度，它可能会在下一行以一个孤立的内联 block 结束:

是否有一种 CSS 方法本质上是某种形式的“孤儿控制”(CSS orphan 似乎不适用于这种情况)以便如果元素少于一定数量在第二行，它会把更多的东西包在那里以平衡事情？

.container {
    width: 100%;
}

.item {
    display: inline-block;
    width: 50px;
    background-color: blue;
}

<div class="container">
    <div class="item">
        Item 1
    </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 class="item">
        Item 7
    </div>
</div>

Answer 1

这是一个使用 CSS 网格的想法，其中的诀窍是确保您的 div 的宽度表示为固定数量的倍数，以确保您永远不会有孤立元素。

.wrapper {
  --w: 100px; /* width of one item */
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(2*var(--w))); /* the item will break two by two*/
  justify-content:center;
}

.container {
  grid-column: 1/-1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.item {
  width: calc(var(--w) - 10px);
  margin: 5px;
}


/* irrelevant styles */

.container {
  counter-reset: num;
}

.item {
  height: 150px;
  background-color: blue;
  color: #fff;
}

.item::before {
  color: #fff;
  content: attr(class) " " counter(num);
  counter-increment: num;
}

<div class="wrapper">
  <div class="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 class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

如果我们使用3

.wrapper {
  --w: 100px; /* width of one item */
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(3*var(--w))); 
  justify-content:center;
}

.container {
  grid-column: 1/-1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.item {
  width: calc(var(--w) - 10px);
  margin: 5px;
}


/* irrelevant styles */

.container {
  counter-reset: num;
}

.item {
  height: 150px;
  background-color: blue;
  color: #fff;
}

.item::before {
  color: #fff;
  content: attr(class) " " counter(num);
  counter-increment: num;
}

<div class="wrapper">
  <div class="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 class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>