I usually use the following SASS to generate grid layout classes for my projects:
// Layouts
$breakpoints: (
xs: '0',
sm: '576px',
md: '768px',
lg: '1025px',
xl: '1200px',
);
.site .grid-cols::before {
display:none
}
.grid-cols {
display:grid;
grid-template-columns:minmax(0, 1fr);
-webkit-column-gap:1rem;
-moz-column-gap:1rem;
column-gap:1rem;
row-gap:1rem;
}
@each $key,$value in $breakpoints {
@media screen and (min-width: #{$value}) {
.grid-cols.grid-#{$key}-col-1 {
grid-template-columns:minmax(0, 1fr)
}
.grid-cols.grid-#{$key}-col-2 {
grid-template-columns:repeat(2, minmax(0, 1fr))
}
.grid-cols.grid-#{$key}-col-3 {
grid-template-columns:repeat(3, minmax(0, 1fr))
}
.grid-cols.grid-#{$key}-col-4 {
grid-template-columns:1fr 1fr 1fr 1fr
}
.grid-cols.grid-#{$key}-col-5 {
grid-template-columns:1fr 1fr 1fr 1fr 1fr
}
.grid-cols.grid-#{$key}-col-6 {
grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr
}
}
}
And to solve the issue of pagination, you could generate some additional styling for when you want to target the direct descendent of the element you apply the classname to:
.grid-cols-inner > * {
display:grid;
grid-template-columns:minmax(0, 1fr);
-webkit-column-gap:1rem;
-moz-column-gap:1rem;
column-gap:1rem;
row-gap:1rem;
}
@each $key,$value in $breakpoints {
@media screen and (min-width: #{$value}) {
.grid-cols-inner.grid-#{$key}-col-1 > * {
grid-template-columns:minmax(0, 1fr)
}
.grid-cols-inner.grid-#{$key}-col-2 > * {
grid-template-columns:repeat(2, minmax(0, 1fr))
}
.grid-cols-inner.grid-#{$key}-col-3 > * {
grid-template-columns:repeat(3, minmax(0, 1fr))
}
.grid-cols-inner.grid-#{$key}-col-4 > * {
grid-template-columns:1fr 1fr 1fr 1fr
}
.grid-cols-inner.grid-#{$key}-col-5 > * {
grid-template-columns:1fr 1fr 1fr 1fr 1fr
}
.grid-cols-inner.grid-#{$key}-col-6 > * {
grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr
}
}
}
Using these classnames, if I wanted a paginated loop with 4 columns and some nice responsive breakpoints, I could write the following:
<div class="grid-cols-inner grid-lg-col-4 grid-sm-col-2">
<Loop type=post paged=8>
<div>my post item</div>
</Loop>
</div>