Streaming live at 10am (PST)

CSS Grid - how to invert rows and columns?


#1

With CSS grid, Is it possible to invert rows and columns at a breakpoint?

For example, I have a grid of 10 columns (width = 10vw) and 5 rows (height = 10vw), so each cell is responsively square. With mobile view, it would be great to turn the grid minus-90-degrees from ‘landscape’ to ‘portrait’, so the grid then has 5 columns and 10 rows. And the contents of the rows invert to the columns. (col1/row1 becomes col1/row10; col2/row1 becomes col1/row9, etc.) I tried rotating the grid container, but it didn’t expand to the screen width.

Would this have to be done with Javascript?


Here is my site Read-Only: https://preview.webflow.com/preview/modernist-css-grid?utm_source=modernist-css-grid&preview=a8714b1b1066d4702c21746620d66c5f


#2

Hey @chuckPhipps

A great thing about grid is that you can customize the settings and layout per breakpoint without using classes. So changing your grid setup from 10C x 5R to 5C x10R is straight forward.

However a main idea about grid in Webflow in its current state is that it acts more like guides than containers. Essentially working more like layers and guides than like the tradition cascading html like we’re used to. All that to say, on the mobile breakpoint you will need to manually move the content to the desired cells. Here’s an example I did earlier today.

This maybe the answer we’re looking for from the blog talking about grid features that are coming soon.

Define your own grid areas

Grid areas allows you to create a visualization of your layout without having to add any content. This will make it much easier to create reusable grid layouts that can be made responsive without having to fuss with the position of each grid child.


#3

Great answer, seems logical. This means I’ve got 50 cell-contents to manually move, but it’ll be worth the practice. Thanks, Matthew.