Hacker News Reader

Comment by ad404b8a372f2b9 | Hacker News Reader

I love flex, it's made CSS so easy. One of the things that improved my flex usage was using Penpot to draw my designs before implementing them.

They have alignment properties for graphical elements that work like flex's justify-content and align-items properties so once you design a view in Penpot it becomes almost trivial to translate it into HTML/CSS using flex.

It really changed my mindset from working with relative or absolute positioning, blocks, margins, padding, etc... to simply working with flex everywhere. And it's responsive automatically!

View on HN

Just wait until you try CSS Grid :) IMO it's even more intuitive than Flexbox, at least for any 2 dimensional layout.

Grid and Flex serve different purposes for layout. Also Grid has many of the same keywords as flex, but is more complex. I wouldn't call it more intuitive.

Grid and Flex serve different purposes for layout. Also Grid has many of the same keywords as flex, but is more complex.

I find CSS Grid easier to understand than Flex. I also think it's easier (arguably more logical) to start with Grid and then understand Flexbox and how fits in your Grid.

The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout, although Bootstrap 5 has opt-in CSS Grid). You could argue that CSS Grid makes frameworks redundant for layouts only.

Developers have rightly complained how cumbersome CSS layout has been in the past. It's ironic CSS Grid is available in all modern browsers but developers still aren't using it.

Not sure, but grid seems to be not very framework-able. Bootstrap frees you from choosing geometry by traditional grid system where you just class-mark columns and that's it. CSS grid is a whole new ~sublanguage that you have to master.

For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout.

Flex is better if the individual elements should have some control over the layout, whereas grid is better if the container should be fully controlling the layout.

Great 20min tutorial vid with examples and details on the above: https://www.youtube.com/watch?v=3elGSZSWTbM

Grid is also 2D capable whereas flex is supposed to be a one-axis situation.

You can nest flex such that it acts in a 2D way but it’s a bit annoying

Are there any layout behaviors that are possible to achieve with flexbox but impossible with grid? Basically, setting aside inversion of control at the moment, does grid subsume flexbox?

Even the deconstructed pancake example in the posted article doesn't seem to be impossible with CSS grid but I haven't given it too much thought.

That's good advice—I like it.

Another data point I use is that if I find myself adding a container for the sole purpose of layout, I realize that I should be using grid. That is one of the biggest wins of grid: you don't need to pollute your markup with nearly as many layout/presentation-only elements.

For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout.

I guess I’m wondering why it’s any more complicated than:

* Flexbox is for formatting in one dimension (or axis)—a row or a column.

* Grid is for layout in 2-dimensions—columns and rows; a.k.a. a grid.

In fact, you can use flexbox and grid in the same layout, each doing its thing.

What I'd add your summary: Flex wrapping is a different kind of 2-dimension behavior than a grid, but they're both useful 2 dimensional layout behaviors.

In fact, you can use flexbox and grid in the same layout, each doing its thing.

100% At 17:30 near the end of that video I linked is an example of mixing them.

Grid surely is more complex. For example: Units that appear nowhere else in CSS besides Grid, functions that are only used in Grid. It feels like a language inside a language.

Reply on news.ycombinator.com