Solved - Styling paged content

Loops & Logic
6

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>
2 Likes