Automattic
Layout Grid: Can't Reliably Change Column Row for Responsive Sizes
If you set up a Layout Grid block that is set to any number of columns, trying to adjust the layout of the content display for the Tablet so that one element goes to another line is nearly impossible -- after a bunch of testing, I did find out that if you can get the value for one span to be <5, and then hit backspace in the value of the other span, you can then force the grid to recognize things should be on two rows.
It's odd to describe in text, but here's a GIF showing what I mean: https://d.pr/i/J7Pl0S
From the GIF it looks like by assigning a full 8 column span for both elements, they force the CSS grid to create an implicit new row, which I understand is desirable in this case.
It seems the primary challenge here is that we have some JS present that is smart in sizing the columns and distributing space, i.e. when col 1 is 7 wide and col 1 is 1 wide, it won't expand 7 wider intentionally. It seems we might just want to allow that?
I think it'd be ideal if that was allowed -- since the Mobile view of the block will let you put things into two different rows (and does it automatically by default), it'd make sense for the Tablet view to be able to have the same sort of change (from my perspective, anyway!) 😄
Hey all, I love the plugin. Any updates on this bug? We are using this on a live client site, and all 3- and 4-column layouts break to 1 and 2, or 2 and 2, columns respectively, on the tablet view. I considered wrapping the grid in an HOC that removes the tablet view entirely, but the CSS will still force a funky layout in tablet size then. I'm going to frankenstein the plugin and override the conflicting React and CSS code if we can't get a fix, which I reeeeeally don't want to do. Thanks!
In the meantime, I've overridden the tablet view to use desktop settings with the following SCSS - mostly untested, use at your own risk:
// beat grid into submission on tablet
$break-small: 600px;
$grid-tablet: repeat(12, 1fr);
html .wp-block-jetpack-layout-grid {
// Tablet grid rules.
@media (min-width: #{ ($break-small) }) {
grid-template-columns: $grid-tablet;
@for $i from 1 through 12 {
@for $x from 1 through 4 {
&.column#{ $x }-desktop-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-column-start: $i;
}
}
}
@for $i from 1 through 12 {
@for $x from 1 through 4 {
&.column#{ $x }-desktop-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-column-end: span $i; // Set it to span $i columns, regardless of starting position.
}
}
}
@for $i from 1 through 4 {
@for $x from 1 through 4 {
&.column#{ $x }-desktop-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-row-start: $i;
}
}
}
}
}
(html selector is added to increase specificity - you can remove if you're loading this after the grid SCSS)
I appreciate your feedback and excitement around this. I'd love to see it happen. It's been very busy weeks, so we haven't had a chance to give this the attention it deserves, but hopefully soon!
This isn't really a bug, but expected (albeit very quirky) behaviour. There's a little bit of info into it here:
https://wordpress.com/support/wordpress-editor/blocks/layout-grid-block/#multiple-rows and https://wordpress.com/support/wordpress-editor/blocks/layout-grid-block/#multiple-rows
It's also tracked here:
https://github.com/Automattic/block-experiments/issues/46
I think for the moment that, if it's possible, customising with your own CSS is the best solution.
Had a customer who wanted the ability to have their 3 columns stack on tablet like they do on mobile but we were unable to make it work with the Layout grid so I got some CSS help from @edequalsawesome. Posting here for reference: 27481235-hc
@johngodley I might be misunderstanding what you're saying, but the documentation you linked to says moving elements to a different row should be possible, which is why I marked this as a bug initially:
Tablet and mobile layouts can have multiple rows. If you wish to move columns across rows then you will need to use the block settings sidebar.
If that's not the intended behavior, we should likely update the documentation to make that more clear 🙂
I am having this issue too. I tried to make my two-column layout stack vertically in tablet mode by changing both columns to span 8. I found this nearly impossible too - in one case I only managed to get there by duplicating another Layout Grid block where I had somehow managed it.
Even if the ability to make a two-column layout stack vertically isn't supported (although it's such a common need, I would highly recommend it!), then there is a bug because, in Tablet mode under "Responsive Breakpoints", it simply won't let me change those numbers at all, and dragging the little guides does nothing either.
I thought I'd give Layout Grid a chance because the core Columns block didn't have any way to control how it looked at different breakpoints (it just does some default css stacking behavior, which sometimes works and sometimes doesn't for whatever content I have). However I'm now having to rethink this. Ideally you could define your site-wide breakpoints on a plugin settings page, and then for each breakpoint have a completely different layout for each column (not to mention, why stop at 4 columns?)
