CSS: Absolutely positioning things relatively (opens in new tab)

> auto-generating mobile layouts and that the user simply needs to create a desktop layout?

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.

Venture further into that: grid-template-areas let you visually lay out the elements in the grid, and combined with media queries let you completely rearrange the page as needed.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...

Or the current days of the web, if you peek at the HN HTML.

Exact same feeling here, everything old is new again when a generation has grown up without experiencing it.

The article doesn't contain any JS. JS is mentioned because it's a possible solution to generating responsive layouts without hand writing any CSS. The whole purpose of the article is to explore generating responsive style from a user designed layout without manually writing the CSS code. It's an unsolved problem domain.

> has always worked

Some of you have never had to hide styles from IE5 with HTML comments and it shows.

As a follow up, I’d like to try expressing the same with constraints instead of a grid. E.g.:

$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)

It does jump, but perhaps this is an unintended consequence that makes it easier to tap those icons?

Flex and grid are 2 different domains.

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.

Flex is way simpler to use and reason about, it's sufficient for a majority of cases and it works on IE11, which is still supported until 2025.

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.

For page layout sure, but for stuff like a unknown-length sequence of blocks/tiles/cards of mixed size flexbox is getting more useful, especially now grid-gap is just gap and works on flexbox too.

I think the next challenge would be to have a native "masonry" grid feature. That would cover several usecases.

when managers pressure the developer to ship fast and move to the next thing

Hey, op / author here. For this design, of course you could use Flex, but the purpose of the article is that a design created with a drag and drop editor by a user, could be rendered responsively. Users could overlap elements and create all kinds of complex creations that we can't slice up in to flex blocks programmatically. The grid provides a way to render just about anything, with a bit of flexibility.

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.

This is evidently intended for platform builders, not standalone site authors. As someone whose systems include content authored by nontechnical third parties, and favouring pure CSS solutions to layout concerns, I found it a useful discussion.

> You can implement such a layout without using Grid Layout and using just Flex Layout

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.