Personally, I prefer constructing my own flexbox rather than relying on Bootstrap's Grid system. This way, I have the freedom to customize padding on items and ensure a consistent spacing between them.
<section class="items">
<a href="#" class="item">
<figure />
</a>
<a href="#" class="item">
<figure />
</a>
...
</section>
To begin, set .items as a flexbox with a row that wraps:
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
.items {
display: flex;
flex-flow: row wrap;
}
I'm utilizing SASS here but the generated CSS is visible in the demo.
I noticed the .col-6, .col-sm-4, etc classes on each column. You can mimic this by adjusting the width of each .item on different breakpoints:
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
.items {
display: flex;
flex-flow: row wrap;
.item {
width: calc(100%/2); // 2 per row
@include media-breakpoint-up(sm) {
width: calc(100%/3); // 3 per row
}
@include media-breakpoint-up(md) {
width: calc(100%/4); // 4 per row
}
@include media-breakpoint-up(lg) {
width: calc(100%/6); // 6 per row
}
}
}
Next, calculate the gutter between two .items. Even with padding on each .item, the spacing between them will double. To compensate, add half of the gutter/spacing on the parent flexbox, .items.
If you are using SASS, defining a variable for the gutter spacing and conducting calculations based on that would simplify the process:
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$items-gutter: 2rem;
.items {
display: flex;
flex-flow: row wrap;
padding: $items-gutter/2;
.item {
padding: $items-gutter/2;
width: calc(100%/2); // 2 per row
@include media-breakpoint-up(sm) {
width: calc(100%/3); // 3 per row
}
@include media-breakpoint-up(md) {
width: calc(100%/4); // 4 per row
}
@include media-breakpoint-up(lg) {
width: calc(100%/6); // 6 per row
}
}
}
This setup adds 1rem padding on the .items flexbox and 1rem padding on each .item, totaling 2rem of padding around each item.
https://i.sstatic.net/M3TUJ.png
demo: https://jsfiddle.net/davidliang2008/rv0knh8b/15/