8 ms·
CSS: Absolutely positioning things relatively
- onion2k 4y agoWhen did designers stop bothering with mobile first layout?
- daok 4y agowhen managers pressure the developer to ship fast and move to the next thing
- livinglist 4y agothis is such a great info!
- yuchi 4y agoThis 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.
- nicoburns 4y ago> 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.
- ben-morris 4y agoHey, 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.
- inopinatus 4y agoThis 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.
- deleted 4y ago[deleted]
- amelius 4y agoNice technique. Reminds me of the old days of the web, when everything was done with TABLEs.
- Etheryte 4y agoExact same feeling here, everything old is new again when a generation has grown up without experiencing it.
- distantsounds 4y ago
- pvg 4y agoOr the current days of the web, if you peek at the HN HTML.
- 4y ago
- sangeeth96 4y agoNice 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?
- ben-morris 4y ago> 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.
- meerita 4y agoFlex is becoming more and more irrelevant to do layouts. CSS Grid is really solid and it works well on responsive. The possibilities are endless.
- Macha 4y agoFor 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.
- meerita 4y agoYes, it is useful for inline positioning, ex. a menu, but for the rest of the things mostly css does solve it without having to do much.
- silvestrov 4y agoFlex 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.
- meerita 4y agoExactly. But we came from using Flex as the defacto system to do layouts and more, now with CSS-Grid it does make sense to use flex for what it was meant for.
- leo-tada 4y agoI 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
- have_faith 4y agoThe 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.
- galoisgirl 4y ago> has always worked Some of you have never had to hide styles from IE5 with HTML comments and it shows.
- wruza 4y agoIn 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.
- JoBrad 4y agoIt does jump, but perhaps this is an unintended consequence that makes it easier to tap those icons?
- wruza 4y agoAs 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)
- kroltan 4y agoAndroid has ConstraintLayout with some of that, but it's just "spaces between sibling edges", not quite as flexible as you describe.
- hiram112 4y ago> 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.
- oliwarner 4y agoFlexbox 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.