CSS Grid 使用间隔器均匀分割

Question

我想知道是否可以均匀地分割 grid。例如，假设一个 ul 有 6 个 li - 网格将采用 6/2 并在可用空间的中间插入一个间隔符。这是一个设计：

我不想使用 Javascript 或 column-count + float 来完成此操作。我只是想知道这是否很容易实现。我正在使用 WordPress，我想避免制作左右菜单。

Answer 1

我将考虑在 this previous answer 中使用的类似想法，您可以为每种情况定义一个 CSS 以涵盖所有可能性（考虑到您将有一个最大边界）

.box {
  display: flex;
  counter-reset: divs;
  margin: 5px;
  border:1px solid;
}

.box div  {
  border:1px solid red;
  width:50px;
}

.box div:before {
  counter-increment: divs;
  content: counter(divs);
}

.box div:nth-child(1):nth-last-child(2) + *,
.box div:nth-child(2):nth-last-child(3) + *,
.box div:nth-child(3):nth-last-child(4) + *,
.box div:nth-child(4):nth-last-child(5) + *,
.box div:nth-child(5):nth-last-child(6) + *,
.box div:nth-child(6):nth-last-child(7) + *
/*
.box div:nth-child(N):nth-last-child(N+1) + * 
*/{
   margin-left:auto;
}

<div class="box">
  <div></div><div></div>
</div>


<div class="box">
  <div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div>

生成上述 CSS 的 SASS 代码

$n:12; /* make this a big as you need */

@for $i from 1 through $n {
  .box div:nth-child(#{$i}):nth-last-child(#{$i + 1}) + *{margin-left:auto}
}

另一种配置：

.box {
  display: flex;
  counter-reset: divs;
  margin: 5px;
  border:1px solid;
}
.box::after {
  content:"";
  min-width:50px; /* your spacer here */
}

.box div  {
  border:1px solid red;
  flex:1;
}

.box div:before {
  counter-increment: divs;
  content: counter(divs);
}

.box div:nth-child(1):nth-last-child(2) ~ *,
.box div:nth-child(2):nth-last-child(3) ~ *,
.box div:nth-child(3):nth-last-child(4) ~ *,
.box div:nth-child(4):nth-last-child(5) ~ *,
.box div:nth-child(5):nth-last-child(6) ~ *,
.box div:nth-child(6):nth-last-child(7) ~ *
/*
.box div:nth-child(N):nth-last-child(N+1) ~ * 
*/{
   order:1;
}

<div class="box">
  <div></div><div></div>
</div>


<div class="box">
  <div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div>

您可以随意调整对齐方式：

.box {
  display: flex;
  counter-reset: divs;
  margin: 5px;
  border:1px solid;
}
.box::after {
  content:"";
  min-width:50px; /* your spacer here */
}

.box div  {
  border:1px solid red;
  width:50px;
  margin:auto;
}

.box div:before {
  counter-increment: divs;
  content: counter(divs);
}

.box div:nth-child(1):nth-last-child(2) ~ *,
.box div:nth-child(2):nth-last-child(3) ~ *,
.box div:nth-child(3):nth-last-child(4) ~ *,
.box div:nth-child(4):nth-last-child(5) ~ *,
.box div:nth-child(5):nth-last-child(6) ~ *,
.box div:nth-child(6):nth-last-child(7) ~ *
/*
.box div:nth-child(N):nth-last-child(N+1) ~ * 
*/{
   order:1;
}

<div class="box">
  <div></div><div></div>
</div>


<div class="box">
  <div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div>

---

CSS 网格也可以做到：

.box {
  display: grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  counter-reset: divs;
  margin: 5px;
  border:1px solid;
}
.box::after {
  content:"";
}

.box div  {
  border:1px solid red;
}

.box div:before {
  counter-increment: divs;
  content: counter(divs);
}

.box div:nth-child(1):nth-last-child(2) ~ *,
.box div:nth-child(2):nth-last-child(3) ~ *,
.box div:nth-child(3):nth-last-child(4) ~ *,
.box div:nth-child(4):nth-last-child(5) ~ *,
.box div:nth-child(5):nth-last-child(6) ~ *,
.box div:nth-child(6):nth-last-child(7) ~ *
/*
.box div:nth-child(N):nth-last-child(N+1) ~ * 
*/{
   order:1;
}

<div class="box">
  <div></div><div></div>
</div>


<div class="box">
  <div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div>

<div class="box">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
</div>