Solved - Styling paged content

Loops & Logic
#1

I spent a lot of time trying to figure this out, so I’m posting it for the benefit of anyone else.

For an unpaginated grid layout with two columns, I wrap my items in a container like this:

<div class="container">
   <Loop type="dogs">
      items i want to see
 </Loop>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-gap: 40px;
}

But you only get one column if you paginate the loop by adding, say: paged=4

That’s because L&L adds a <div> with a class of tangible-paginator-target. Therefore your items are no longer directly inside <div class="container">

EDIT:
If you target .tangible-paginator-target by itself, you run the risk of affecting other loops.

So make sure .container is unique, then target your CSS like this:

.container .tangible-paginator-target {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-gap: 40px;
}

Cheers, Richard

3 Likes
#2

@RichardC, thanks for the tip. I just ran into the same issue and would have had trouble figuring this out. :slight_smile:

1 Like
#3

Thanks. I also just made an edit (above) after discovering my CSS was affecting other loops.

1 Like
#4

Is there a possibility to make this a 4 column layout?

#5

Make sure the column width is less than the row width (plus spaces between columns) divided by four.

For example, my row width is 1200. My CSS below sets the min column width at 500. So there can be no more than two columns. If my min column width was 350, three columns would fit (assuming the width between columns didn’t push everything over 1200). Experiment with what it would take for four columns.

grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
1 Like
#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
#7

I would listen to @julia who operates at a much higher different level than I do.

Also, @julia, would you mind sharing how you bring SASS into Wordpress and/or, would you recommend SASS or SCSS for a casual user?

Cheers, Richard

#8

I saw this that is kind of similar to your solution. (At the bottom)

#9

Good link. Another big issue is if you want your cards to shrink in size, or stay one size and just limit the number of columns, or shrink some, but not too much.

#10

All of the L&L Style editors are SASS compatible by default! A lot of the tools in SASS can make your CSS simpler and help you avoid repeating yourself, so even if you aren’t making heavy use of its more complex functionality it’s worth being a bit familiar with :slight_smile:

#11

So do I … now. Cheers.

1 Like
#12

For anyone who might use this, I went deep down a rabbit hole trying to figure out how to stop a single column from being left justified.

<div class="grid-cols-inner grid-lg-col-4 grid-sm-col-2">
  <Loop type=post paged=8>
    <div class='my-center'>my post item</div>
  </Loop>
</div>

.my-center {margin-left: auto; margin-right: auto;}

What made it complicated was that I first just used margin: auto; but that made my items centered vertically as well. I tried a bunch of vertical justification css before finding a solution.

Cheers, Richard

#13

I like to generate a bunch of spacing classnames on my projects including ml-auto, mr-auto and mx-auto which I mostly use for positioning in grid and flex contexts :slight_smile:

Here’s my SASS for generating all manner of spacing classes:

$spacer: .5rem;
$positions: (
  t: top,
  r: right,
  l: left,
  b: bottom,
);

@for $i from 0 through 12 {
  .m-#{$i} {
    margin: $spacer * $i !important;
  }
  .p-#{$i} {
    padding: $spacer * $i !important;
  }
  .mx-#{$i} {
    margin-left: $spacer * $i !important;
    margin-right: $spacer * $i !important;
  }
  .mx-n#{$i} {
    margin-left: -$spacer * $i !important;
    margin-right: -$spacer * $i !important;
  }
  .my-#{$i} {
    margin-top: $spacer * $i !important;
    margin-bottom: $spacer * $i !important;
  }
  .px-#{$i} {
    padding-left: $spacer * $i !important;
    padding-right: $spacer * $i !important;
  }
  .py-#{$i} {
    padding-top: $spacer * $i !important;
    padding-bottom: $spacer * $i !important;
  }

  @each $k,$v in $positions {
    .m#{$k}-#{$i} {
      margin-#{$v}: $spacer * $i !important;
    }
    .m#{$k}-auto {
      margin-#{$v}: auto !important;
    }
    .m#{$k}-n#{$i} {
      margin-#{$v}: -$spacer * $i !important;
    }
    .p#{$k}-#{$i} {
      padding-#{$v}: $spacer * $i !important;
    }
  }
}

.mr-auto, .mx-auto {
  margin-right: auto !important;
}
.ml-auto, .mx-auto {
  margin-left: auto !important;
}
.mt-auto, .my-auto {
  margin-top: auto !important;
}
.mb-auto, .my-auto {
  margin-bottom: auto !important;
}

These could collide with other styling frameworks like bootstrap, so use them carefully!

1 Like
#14

Very useful! I’ve done a caveman version by hand-coding some spacing classes in my CSS reset, but yours is from the future!

I really like your x-y labeling for handling both right and left, or top and bottom. Same for your use of numbers to increment by half-steps of rem.

#15

@julia thanks for the smart grid code, I am using this for all my sites now. :slight_smile:

1 Like
#16

@julia quick question about grids. Is it best practice to put each feature on a page in a grid even if only one column is required sometimes? I assume this is best for spacing consistency etc. Thanks.

#17

Is it best practice to put each feature on a page in a grid even if only one column is required sometimes

I’m not sure about best practice but sometimes I do and sometimes I just use bottom margin like so:

.my-item:not(:last-child) {
  margin-bottom: 20px;
}
1 Like