Responsive grid

I Need Help
1

I created a timetable with the Grid bric at the LG size, but can’t seem to make it responsive at smaller sizes. Ideally, I want it to display one column on a mobile screen.

Any advice/ ideas how to achieve it?

CleanShot 2025-08-07 at 09.55.26@2x
CleanShot 2025-08-07 at 09.55.26@2x2582×1134 446 KB

1 Like
2

You can easily do that by going to the smaller breakpoints and delete columns there…

1 Like
3

Mattheus,

Thanks for your suggestion. It’s not quite what I was looking for (I probably could have explained it better), but it does work; sort of. I had to move some of the cells around in the XS size, and that changes them also at larger settings. Using your suggestion, I’ve just duplicated the block and set the respective visibilities accordingly.

Thanks again.

4

Since Blocs uses grid-template-columns and grid-template-rows within the inbuilt CSS GRID bric theoretically you should be able to change column 1fr 1fr 1fr 1fr 1fr 1fr across breakpoints using the Class Editor > CSS GRID so its just 1fr for mobile.

:thinking: Maybe Norm can show this via a Blocs Byte video or explain this. As there should not be a need for resorting to things such as: “deletion, rebuilding, duplicating, visibility” to get a basic CSS Grid to be responsive. :wink:

For instance:

Responsive CSS Grid should not be overtly difficult since its built directly into the CSS Grid specification / layout module. Typically via regular CSS it would look something like the following.

.container {
  display: grid;
  /* six equal columns */
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

@media (max-width: 37.5rem) {
  .container {
    /* mobile breakpoint stack columns */
    grid-template-columns: 1fr;
  }
}

Even better if Blocs supported grid-template-areas :partying_face:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "a b c d e f";
  gap: 16px;
}

.item1 { grid-area: a; }
.item2 { grid-area: b; }
.item3 { grid-area: c; }
.item4 { grid-area: d; }
.item5 { grid-area: e; }
.item6 { grid-area: f; }

@media (max-width: 37.5rem) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e"
      "f";
  }
}

Then you could also easily reorder areas freely however you want across break points. grid-template-areas: "c" "a" "e" "b" "f" "d";

In fact you don’t even need media queries for CSS Grid to be fully responsive when using minmax. grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));

CSS Grid is really powerful and offers a lot:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout

1 Like
5

That’s great, thanks. I’ll give it a try. I did come across the f1,f1, etc somewhere (I think in the class editor), but didn’t want to change them for fear of messing up about 3 hours’ work.

I have come up with a solution; creating a couple of versions and adjusting the visibility to match the screen size. I remember reading somewhere, though, that Google doesn’t ‘like’ hidden elements in site codes, so I’m not sure if my solution is the most appropriate.

Thans again.

6

You’re welcome.

You may want to test in a mockup document or duplicate of your project before embarking within your actual project. :grimacing:

1 Like