> 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?
Yes. This is a different blog post we have lined up and it's still somewhat experimental. At a high level, it's heuristic based, we attempt to identify elements related to each other and then sort the content in to the logical reading order using empty space between elements. We then generate different layouts for different screen sizes and embed them within the media queries.
I know that's a bit vague, but it's quite a complicated process to articulate in a comment and hopefully we can share more details soon - it's very much still BETA and not claiming we've nailed it.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...
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.
Some of you have never had to hide styles from IE5 with HTML comments and it shows.
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.
$image is at the top left, xy-padded by P, which is 5% of its width. To the right of it x-padded by P on both sides is a $textblock, with a minimum width of that of the image, aligned by top. If their natural/defined minimums make them not fit the width of the screen, $textblock goes below the $socialbtns padded by P/2, aligned by width of $image. $socialbtns are below the image aligned to the left, y-padded by P/2.
This should be expressed more formally, but you get the idea. Why can’t we just do this and instead have to solve some unique puzzle by hand every time we need some layout?
(Made few edits to constraints, now seems fine)
Grid is good for making grids.
Flex is good for creating flows of content, like a <div> where all childs has display:inline-block. It supports wrapping when content can't be on a single line.
Grid is more powerful, but not by a huge margin and not in every case. You can get very far with just flex, calc, media queries, and some inline variables and some other tricks. Also grid needs a more global view so to speak and up-front design as opposed to the component based thinking that has become so prevalent.
I'm a fan of the feature but I don't think flex is becoming irrelevant anytime soon.
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.
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.
100% not advocating an engineer to ever do this, we only do it because it's automated and there is no engineer present to convert a design in to a website at scale.
IMO Grid is actually simpler than Flex. Once IE11 is out of the picture, I think it might be worth considering teaching CSS beginners using a Grid-first approach.