Css Grid Vertical Divider Between Two Items
I'm Creating a Grid Layout Using Css Grid. I Want to Make the Entire Grid Items Have Right Divider Before the Next Item, but Except the Last Item in the Same...
I'm creating a grid layout using CSS Grid. I want to make the entire grid items have right divider before the next item, but except the last item in the same row dynamically depends on the grid condition.
Here's what I've tried, the Item 3's divider should not exist because it's the last item in row 1, as well as Item 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>What's going wrong here?
2 Answers
Given that your columns number is fixed at 3
You can do this with the border of the element, But I used the pseudo-element instead as to no mess with it's width.
* {
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>Try this way
.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>Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
