Streaming live at 10am (PST)

Newspaper grid : From 4 to 1 Column


#1

First, “The Grid”…awesome.

Been playing around, and just can’t seem to grasp how the examples are modified to be responsive?

The “Newspaper grid”:
With this example, how did you go from a 4 column grid, multiple rows (Desktop) to a 1 column grid, multiple rows (Mobile)? And change some of the ordering of the blocks?

Same for the “Whitespace Grid” example goes from 4 to to column on Mobile.

Any help would be much appreciated!


#2

Hi @Gravy

Maybe this can help you to understand better?


#3

Hey it does a bit, meaning it does show how to reposition elements fro different views which is nice.

But again, say you had a 5 column, 10 row grid of articles that you simply wanted to stack into a “1” column 10 row (for mobile), and this was a template (CSS) so it work on other pages…whats the best way?

Hope that makes sense?


#4

You can independently change the number of rows and columns for each different viewports. You can also reposition everything independently without changing the order in the elements panel.

CSS grid is like a guide. Is that makes sense?


#5

Yeah that does make sense, just what I was starting to think.

And by changing rows and columns do you mean you just add and delete? Seems like a lot of manual work :slight_smile

Any way to “automatically” change the number of rows and columns

And thanks again for responding!!!


#6

No you have to add/delete them manually but it’s pretty fast! Just some drag and drop! :slight_smile:


#7

Cool. Thanks Donald!