Hacker News Reader

Comment by xp84 | Hacker News Reader

I haven't been able to grasp either grid or flexbox. The last layout strategy I was decent at was floats. This article made me feel confident to use a css grid next time I am designing a layout. Well made! Thank you.

View on HN

If you were there with floats, Grid and Flex will be a walk in the park for you. Give it a day or two and try out a few layouts. And unlike the struggles with browsers, these two seems to just work. In-fact, they are kinda boring.

There are a lot of articles, some really good but I read through two of CSS-tricks articles and that is all there is.

- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

- https://css-tricks.com/snippets/css/complete-guide-grid/

Those articles are my bible. I have them almost memorised but for the more esoteric things I still consult them. Invaluable resource!

I think you can get away without learning grids, but flexbox is a must - given its convenience over the old “float-hacks” and its omnipresence in modern CSS.

Besides the already mentioned css-tricks articles, I recommend checking out the guide to flexbox from mdn[1] (in the side menu there is also one for grids) as well as the reference to “CSS flexible box layout”[2]. These helped me get a deeper understanding about the concepts behind flexbox and how the properties and their shorthands actually work.

[1]: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexibl...

I feel like flexbox is the float grid system done right, and you can lay out children either vertically or horizontally, whereas floats with the clearfix hack were only laid out as rows. But it's still mostly one-dimensional with possible wrapping, so the trick is to nest and stack. With grids it's different, a grid has a template and then the direct children occupy those predefined areas, which is more static than flexbox and the grid doesn't affect other nested elements, which is a limitation, but subgrid should change that.

If you managed to understand floats (a rare feat) you'll have a blast with flex / grid :)

Floats are not weird. They were just utterly misused, using them for layout is an ugly hack.

They were conceived to float text (or other elements) around static elements. Think text floating around a picture, like this:

https://tco-forum-uploads.s3.amazonaws.com/original/3X/0/3/0...

Even though it’s been a long time, I feel compelled to point out that I was only decent at floats, I was never good at it. LOL

Grid has a lot of features but flex is simple enough and still very powerful

The last layout strategy I was decent at was <table>, so you should be fine.

Grid is basically `<table>` with extra functionality (in fact in my project we are emulating table layout using CSS Grid with good results). If you can do <table> then you can do grid.

I'd say grid is table except not in the DOM itself.

Some consequences of that are that you can easily adjust the order and such. And just need to change one elements style to adjust the whole layout.

Reply on news.ycombinator.com