My current project involves establishing a grid system that dynamically populates content, resulting in an uncertain number of elements being created. At the moment, each element is placed within a flexbox container with 3 elements per row. If there are more than 3 elements, the overflow goes to the next row and so forth. I'm aiming to add borders around each element except for the outer ones, creating a layout like this:
__|__|__
__|__|__
| |
However, I've encountered an issue while attempting to apply bottom and right borders to all elements, then removing the border from every 3rd child using nth-child(3n). This approach doesn't address the problem of the bottom border on the final row, resulting in a layout like this:
__|__|__
__|__|__
__|__|__
Since the content is dynamically generated, it's unclear how many elements will be present on the bottom row—ranging from 1 to 3 elements. Consequently, I'm unsure about the best method to target and remove that unwanted bottom border. Can this desired outcome be achieved solely with CSS, or would JavaScript intervention be necessary? Below is my current CSS code snippet:
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.flexElement {
width: 33.33%;
border-right: solid 2px #e1e1e1;
border-bottom: solid 2px #e1e1e1;
&:nth-child(3n), &:last-child {
border-right: none;
}
}