RichardC
(Richard C)
August 23, 2022, 5:49pm
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
Rips
(Phil Rips)
August 26, 2022, 8:06am
2
@RichardC , thanks for the tip. I just ran into the same issue and would have had trouble figuring this out.
1 Like
RichardC
(Richard C)
August 27, 2022, 2:58pm
3
Thanks. I also just made an edit (above) after discovering my CSS was affecting other loops.
1 Like
magnus
(Magnus Näsmark)
December 7, 2022, 8:04pm
4
Is there a possibility to make this a 4 column layout?
RichardC
(Richard C)
December 7, 2022, 8:33pm
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
julia
(Julia Canzani)
December 7, 2022, 8:37pm
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
RichardC
(Richard C)
December 7, 2022, 8:52pm
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
magnus
(Magnus Näsmark)
December 7, 2022, 9:17pm
8
I saw this that is kind of similar to your solution. (At the bottom)
RichardC
(Richard C)
December 7, 2022, 9:21pm
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.
julia
(Julia Canzani)
December 8, 2022, 12:55am
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
RichardC
(Richard C)
December 18, 2022, 9:26pm
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
julia
(Julia Canzani)
December 21, 2022, 4:09pm
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
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
RichardC
(Richard C)
December 21, 2022, 5:48pm
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.
Rips
(Phil Rips)
January 4, 2023, 3:33pm
15
@julia thanks for the smart grid code, I am using this for all my sites now.
1 Like
Rips
(Phil Rips)
January 14, 2023, 6:00am
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.
julia
(Julia Canzani)
January 14, 2023, 6:25pm
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