Nice technique. Reminds me of the old days of the web, when everything was done with TABLEs.
> But what if we flipped this? What if we first look at the position of the elements that we want to render and then create all the columns and rows from them.
What's old is new again!
This immediately brought me back to 2005 and apps like Dreamweaver or Fireworks that'd let you drag and drop your components onto a page, and underneath the covers would create some very complex (but clever) HTML table structure, complete with sliced and diced images and invisible pixels to space things correctly.
The underlying code wasn't pretty, but the sites did tend to render correctly, even in browsers like IE6.
Though back in those days, nobody had to worry about 6" phone screens, so not sure how well it'd scale (down) today.
I don't understand why we're even talking about javascript? Responsiveness has always worked fine on css. Even without grid, you could easily make a good responsive layout
In media query section, a gif that shows text block going down, you can see that at mobile scales the spacing between social icons jumps suddenly for seemingly no reason. Was that intended?
In a gif between “It’s probably best to show you” and “Voila”, social icons don’t stick to the image, dangling at the bottom instead. How to make them stick?
Asking it because most commenters here seem to praise the grid, but ignore these little facts. Interesting if these are by design or by overlook and how to fix that.
Flex is becoming more and more irrelevant to do layouts. CSS Grid is really solid and it works well on responsive. The possibilities are endless.
Flexbox would have been my preference here. media query to switch the flex-direction, order to pull the buttons up in small mode. But grid seems to work too.
I've been doing this for 20+ years. I was there when CSS hatched and we started switching out tables and image maps for divs and layers and then crying when IE4, IE5 invariably didn't work. What I mean to say is that isn't is nice that we can have multiple ways of accomplishing the same thing in a standard way?
I barely ever have to fix cross-browser positional issues these days. That used to be 20% of my working life.
When did designers stop bothering with mobile first layout?
This approach is over-engineered to say the least…
You can implement such a layout without using Grid Layout and using just Flex Layout. Also with some min-/max-width tricks you can also completely avoid having media queries in there…
For beginners in HTML/CSS this approach is absolutely distracting IMHO.
this is such a great info!
Nice work and thanks for sharing it. TIL about zero-width cols/rows in Grid.
> You can see all the breakpoints kicking in as the available width changes. Our backend algorithms can reconfigure the content and produce a different grid layout for each screen size, allowing everything to move around.
Could you elaborate on this? Is this implying that the backend is auto-generating mobile layouts and that the user simply needs to create a desktop layout? If yes, how does it decide where to place things if multiple media and multiple text blocks are present?