Question

我正在使用 CSS 网格 创建网格布局。我想让整个网格项目在下一个项目之前有右分隔符，但是除了同一行中的最后一个项目动态取决于网格条件。

这是我尝试过的，项目 3 的分隔符不应该存在，因为它是第 1 行的最后一个项目，也是项目 5。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  white-space: nowrap;
}

html, body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

div {
  position: relative;
  display: block;
}

.grid {
  width: 25em;
  padding: .5em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
  grid-gap: .5em;
  border: 1px dashed palevioletred;
}

.grid > .item {
  padding: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid > .item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: .025em;
  width: 1px;
  background-color: cornflowerblue;
}

<div class="grid">
  <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>

这里出了什么问题？

Answer 1

鉴于您的列数固定为 3

你可以用元素的边框来做到这一点，但我使用了伪元素来代替它的宽度。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  white-space: nowrap;
}

html,
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

div {
  position: relative;
  display: block;
}

.grid {
  width: 25em;
  padding: .5em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
  grid-gap: .5em;
  border: 1px dashed palevioletred;
}

.grid>.item {
  padding: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Added */
.grid>.item:nth-child(3n+2):before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.5em;
  right: -.5em;
  height: 100%;
  border-left: .5em solid red;
  border-right: .5em solid red;
}

.grid>.item:last-child:before {
  border-right: none;
}

<div class="grid">
  <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>
<div class="grid">
  <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>
<div class="grid">
  <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>

Answer 2

试试这个方法

 .grid > .item:not(:nth-child(3n))::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: .025em;
  width: 1px;
  background-color: cornflowerblue;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  white-space: nowrap;
}

html, body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

div {
  position: relative;
  display: block;
}

.grid {
  width: 25em;
  padding: .5em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
  grid-gap: .5em;
  border: 1px dashed palevioletred;
}

.grid > .item {
  padding: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid > .item:not(:nth-child(3n))::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: .025em;
  width: 1px;
  background-color: cornflowerblue;
}

<div class="grid">
  <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>

两个项目之间的 CSS 网格垂直分隔线

2 个答案: