Hacker News Reader

Oof. You are definitely missing the entire point of CSS Grid.

CSS Grid is a two dimensional layout tool. Flexbox is one.

CSS Grid is for architectural layout. Flexbox is for alignment and flow layout.

CSS Grid was enabled across all major platforms by October 2017. You've had two years to figure that out. You want it on IE? Then use CSS Grid's original syntax because Microsoft supported Grid first.

The browsers haven't "started implementing some layout tools" --- they literally did it, en masse, in 2017. Grid was available for everyone's use by October.

Do yourself a favor and work through the examples here: https://gridbyexample.com/

Do yourself another favor, and stop trying to make different layouts for all the different sizes. Or, go with insanity - your call. Grid is for responsive layout, out of the box; no negative margins, no weird padding, no inane extra workarounds just to get something to line up.

Once you understand that CSS Grid is the tool we have been waiting for since the late 90s, and that it, NOT Flexbox, is the sane, maintainable, future-proof layout tool for pages, and then using Flexbox within it to adjust flow and tempo -- you will/can spend a lot more time playing with things for the sake of play, and not for the sake of debugging.

Good luck.

While I agree with almost everything you said, did you need to be condescending while doing it?

These is value to vehemence in arguments.

`s/vehemence/passion/` and I might have agreed. The words may be similar, but there is a distinct difference between them. Had OP just showed passion for the topic without being vehement, I think it might have landed a lot better.

My thoughts exactly. Let’s all be adults here.

> CSS Grid is a two dimensional layout tool. Flexbox is one. >CSS Grid is for architectural layout. Flexbox is for alignment and flow layout.

I agree with the first (it seems impossible not to) but I think the 2nd is kind of a misconception. That grid is for “architectural layout” ... it’s for any two-dimensional layout, any time, any place. And flexbox is often totally appropriate for laying out entire pages or large sections of pages, if 2 dimensions of flexibility are not needing to be controlled. You can have grids inside your flex items inside your grids inside your flex items as needed.

The decision of layouts having to look a certain way at different sizes unfortunately is often made long before any code is written to implement a design in my experience. Not much the implementation person can do except maybe push back, but it can be a tough sell to ask for an approved design to change so that the underlying code can be less hacky.

> The browsers haven't "started implementing some layout tools" --- they literally did it, en masse, in 2017.

Fun fact: Grid support in Blink and WebKit were added by the same people. https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is...

Grid and flexbox have different uses and values. I wouldn't give up on grid. There are things it does that Flexbox fails spectacularly at. (absolute layout control for one...) But also flexbox does a few things grid simply cannot. So it's good to know both.

Sadly, I haven't been able to find any benchmarck comparing grid vs flexbox, despite layout being a common bottleneck.

They have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.

This is a very good rule of thumb.

Grid is great for the layout of the whole page (header/content/sidebar/footer) or specific gridded containers.

Flexbox is great for everything else, and specifically what you said about in one dimension, like form label/input or a repeating set of thumbnails, or justified buttons.

I agree for the common case, but CSS grid even for one axis can be better, especially for gutter/gap.

It's nice to be in a place with CSS where we're talking about all of the good ways to do things rather than telling each other "if you abuse this feature you can accomplish the task in 2 of the major browsers. YMMV."

That's an okay rule of thumb, but I find myself using grid more and more for traditional flexbox applications like a horizontal list of cards that wraps. Little things like grid-gap (flex child margins are a constant source of pain) and auto-fill with minmax [0] make a big difference to me in rapid prototyping.

[0] eg: grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

Firefox supports grid-gap for flex, but I no other browsers do yet.

https://caniuse.com/#search=gap

It would be nice to find a document showing how to do some examples in both Grid and Flex and compare the amount of markup needed, also pros and cons of each for each example

I have been in desktop and mobile dev my entire career. Starting doing web dev 12 months ago for a new job. Never once have I thought to myself "I should figure out what float does".

Grid + Flex + Block + Absolute covers all layout needs. It's funny to me because conceptually these ideas have been around on desktop/mobile layout systems forever. That they are only now making it to the web is insane.

Floats are still useful, not for the same things you would use grid/flex but still has utility, so its good to know about them.

For what?

I literally haven't used float since grid/flexbox hit adequate market share on CanIUse, and I've been doing web development full time this whole time.

For when you move to a company where the current canIUse marketshare for grid/flexbox is no longer "adequate."

Floats should now only be used for what it's named for, to float around other elements:

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi...

(shape-outside is super buggy though)

For having an image where text flows around it once it finishes. It’s basically good for some text flowing stuff. Which makes sense, that’s what it was designed for originally.

Floats are still useful when you want to express structured document flow layouts with illustrations for nearby body text, side-nav link boxes, aligned or otherwise flow-parametered effects such as initials, syndicated/contributed content, or when you just want to float text around images.

Every time I thought I have needed float, I have always later found a cleaner way to do it without float.

That's probably because float is almost always used for things which it's not designed for. For cases like what the parent described, which float is actually meant for, there is no alternative.

A good example is the floating picture boxes next to paragraphs on Wikipedia. How would you implement such a feature without floats?

On my website I have a sidebar (on large enough displays) where I put sidenotes (which I typically prefer to footnotes). https://chrismorgan.info/blog/dark-theme-implementation/ is an example of an article with both float-based sidenotes and grid-based figure captions in that sidebar. Look at what happens on mobile-sized displays, too. https://chrismorgan.info/blog/2019-website/ is an example of where float really shines on this, with the second sidenote automatically moving down the page due to the length of the first sidenote.

To be fair, we didnt get Grid till 2017. So.. we finally have (nearly) all the tools we need. Maybe. lol

Float is still very useful for paragraph wrapping around media, for basic alignment etc, when you do not need an entire flow of content to be under the management of flexbox. Less is more.

Flexbox is great if you don’t have wildly different layouts across different screen sizes.

If your layout is different enough that you’ll need media queries then you’ll want to use grid anyways.

> If your layout is different enough that you’ll need media queries then you’ll want to use grid anyways.

Ehhh, not really.

A common case is items laid out as boxes. On desktop I want them in rows of 3 to 5 (perhaps more on wider screens, but often this starts to look stupid beyond 4 or 5 so you set a max width for the container). And in mobile we want 1 item per row. With flexbox, you just change the width of the items from 33.33% to 100% in the media query, maybe with some adjustments to margins, and you're golden.

Now consider the same setup, but let's say you wanted all the boxes to be the same height: that would only be possible with grid, or by setting the heights manually

Flexbox is a pain to do gutters