3 ms·

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

by xp84 2y ago

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.

agumonkey 2y ago
If you managed to understand floats (a rare feat) you'll have a blast with flex / grid :)
- kolme 2y ago
  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/03ee6a547a1a0fba88e345c785082a7456561327.jpg https://tco-forum-uploads.s3.amazonaws.com/original/3X/0/3/0...
- xp84 2y ago
  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
Brajeshwar 2y ago
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/a-guide-to-flexbox/ - https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
- hyperbolablabla 2y ago
  Those articles are my bible. I have them almost memorised but for the more esoteric things I still consult them. Invaluable resource!
sbergot 2y ago
Grid has a lot of features but flex is simple enough and still very powerful
orthoxerox 2y ago
The last layout strategy I was decent at was <table>, so you should be fine.
- nicoburns 2y ago
  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.
  - Akronymus 2y ago
    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.
phforms 2y ago
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_layout/Flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou... [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexibl...
dsego 2y ago
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.

by xp84 2y ago

agumonkey 2y ago

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

kolme 2y ago
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/03ee6a547a1a0fba88e345c785082a7456561327.jpg https://tco-forum-uploads.s3.amazonaws.com/original/3X/0/3/0...
xp84 2y ago
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

Brajeshwar 2y ago

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/a-guide-to-flexbox/ - https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/

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

sbergot 2y ago

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

orthoxerox 2y ago

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

nicoburns 2y ago
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.
- Akronymus 2y ago
  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.

phforms 2y ago

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_layout/Flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou... [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexibl...

dsego 2y ago

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.