I was very intrigued by the animated demos, but apparently the animation is not accomplished with CSS :(
I definitely learned flexbox and thought to myself "this is good enough", and haven't really pushed myself to learn grids. It does seem like there's some reason to prefer grid [0], but it overall I've never needed to do anything that can only be done with grid (except data tables, for which I use actual tables).
But I'm still iffy about grid template areas. The article makes a case for easily adjusting layouts per breakpoint, or "for team members who might need to change a layout." Maybe I'm just not the target audience.
Grid template areas is very similar to traditional print layouts that are constrained with both a width and height. If you need something like grid-auto rows it is less useful.
But what’s nice about it is that, if you want them, grid areas are extremely declarative. With non-area templating, you are defining the layout based on the items, and that can be challenging.
Flex is good enough for most things, but grid has its place. Responsive grids (think of those 3 column card layouts that shrink to a single card per row layout on small screens), page layouts like dedicated sidebar areas, resizable elements that should stick to a certain layout despite the resize, etc.
Nothing stopping you from using both as necessary, combined it's a very strong layout tool
Wait, '1/3' isn't a fraction, it's a range from 1 to 3? Why in God's name would they choose that syntax? Ranges have plenty of reasonable, well known syntaxes in programming. E.g. 1..3
Do you have a reference for this particular usage of slash? In print, “x / y” is often used to mean “item x out of y” [0], for example in page numbers. I’m only familiar with using slashes for ranges in ISO 8601, where it has purely syntactic reasons and (AFAICT) doesn’t adopt any preexisting convention.
I imagine the slash in CSS grid is for similar syntactic reasons, because the syntax also admits hyphenated identifiers [1] (custom-ident), which precludes the use of “-”. (They could have used a range operator like “~” or “..” though.)
CSS uses "/" for division (fractions) inside `calc`, so I don't think not understanding the language of "print" is where the frustration comes from nowadays. I think CSS is also part programming language now.
While I like grid functionality, the syntax is really different from lot of other CSS, and it's confusing imho. It's like this corner where you can see they either developed it in isolation or felt they were "going to do it right this time" or something.
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.
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.
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.
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.
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.
Is there a pre-intro version of this document? I am lost at the Introduction itself and not able to get past it. In particular:
> If I need to position child items within the grid, I need to specify the line number for each item by using grid-column.
Stuck at what is 'line number' in this context? I tried to force my way through it hoping context would fill it in but immediately got stuck at fractions like '1 / 3' followed by '1 / 4'.
Line numbers are the dividing lines between columns. If you have 2 columns you’ll have 3 lines: |a||b| the two lines in the middle actually count as 1. Hence 3 lines. So 1/3 is not a fraction its column span. It means “start at line 1 and end at line 3”.
The one thing about auto flow I wish I understood was how to detect, and fill, gaps. If I have some random collection of differently sized objects, how do I ensure that auto flow leaves no gaps? Or even detect that so I can add something?
I hope that's not a stupid question, but why define the syntax as 1/2 and 3/4 (divider) and not 1-2 (column 1 _to_ column 2) and 3-4 or 1->2 or something like that?
a:b is almost universal as a range designator at this point. / is a _terrible_ choice, especially in a context where a fractional value would also make sense.
That was just an objectively bad syntax choice, but probably keeping on track with CSS.
Wow, I just love interactive blog posts like this. For grids I can really recommend just playing around with grid areas in a tool like https://grid.layoutit.com/
I've been using the site to plan my grid layouts for a couple of years now and it just makes spacing so much easier
Readit News
I definitely learned flexbox and thought to myself "this is good enough", and haven't really pushed myself to learn grids. It does seem like there's some reason to prefer grid [0], but it overall I've never needed to do anything that can only be done with grid (except data tables, for which I use actual tables).
[0] https://css-tricks.com/css-grid-replace-flexbox/
I've only used grid for responsive image galleries like https://labs.jensimmons.com/2016/examples/image-gallery-grid... or responsive cards like https://every-layout.dev/demos/grid-cards/. `grid-template-columns` is good to learn. `grid-gap` is convenient. Flexbox seems to handle everything else.
But I'm still iffy about grid template areas. The article makes a case for easily adjusting layouts per breakpoint, or "for team members who might need to change a layout." Maybe I'm just not the target audience.
But what’s nice about it is that, if you want them, grid areas are extremely declarative. With non-area templating, you are defining the layout based on the items, and that can be challenging.
https://caniuse.com/mdn-css_properties_gap (no IE 11 support)
Nothing stopping you from using both as necessary, combined it's a very strong layout tool
A lot of the problems programmers seem to have with CSS probably stem from this misapprehension.
I imagine the slash in CSS grid is for similar syntactic reasons, because the syntax also admits hyphenated identifiers [1] (custom-ident), which precludes the use of “-”. (They could have used a range operator like “~” or “..” though.)
[0] https://en.wikipedia.org/wiki/Slash_(punctuation)#Numbering
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column...
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/
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...
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...
Grid Garden https://cssgridgarden.com
Flexbox Froggy https://flexboxfroggy.com
> If I need to position child items within the grid, I need to specify the line number for each item by using grid-column.
Stuck at what is 'line number' in this context? I tried to force my way through it hoping context would fill it in but immediately got stuck at fractions like '1 / 3' followed by '1 / 4'.
The “line numbers” (not a great name) are the column edges. So 1/3 goes from edge 1 (the left-most) to edge 3, spanning 2 full columns.
Just very cool.
The one thing about auto flow I wish I understood was how to detect, and fill, gaps. If I have some random collection of differently sized objects, how do I ensure that auto flow leaves no gaps? Or even detect that so I can add something?
That was just an objectively bad syntax choice, but probably keeping on track with CSS.
Because of how spaces are already used to separate values in CSS (not to mention our own regular intuition when dashes are involved), this:
is much better than these:I've been using the site to plan my grid layouts for a couple of years now and it just makes spacing so much easier