13 ms·
CSS Grid Areas
- CGamesPlay 2y agoI 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). [0] https://css-tricks.com/css-grid-replace-flexbox/ https://css-tricks.com/css-grid-replace-flexbox/
- wonger_ 2y agoThat's great that you've learned a tool that covers all your needs. I've only used grid for responsive image galleries like https://labs.jensimmons.com/2016/examples/image-gallery-grid-1.html https://labs.jensimmons.com/2016/examples/image-gallery-grid... or responsive cards like https://every-layout.dev/demos/grid-cards/ 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.
- bobthepanda 2y agoGrid 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.
- yurishimo 2y agoIf you can target (somewhat) modern browsers, then you can also use `gap` with Flexbox. Works great! https://caniuse.com/mdn-css_properties_gap https://caniuse.com/mdn-css_properties_gap (no IE 11 support)
- higgins 2y agoA fun tool for grid learning: https://cssgridgarden.com/ https://cssgridgarden.com/
- lenkite 2y ago"No, Flexbox isn't "good enough" https://www.youtube.com/watch?v=MWWcZzossc8 https://www.youtube.com/watch?v=MWWcZzossc8
- sensanaty 2y agoFlex 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
- somishere 2y agoSolid article! Important point I didn't see covered / worth noting with grid & flex layouts is visual vs logical tab orders ... Looking forward to a solution in upcoming specs https://developer.chrome.com/blog/reading-flow-display-contents https://developer.chrome.com/blog/reading-flow-display-conte...
- lelandfe 2y ago> Last year we published... N.b there's been a weird trend for blogs to remove publish dates and it really compounds the issue when the contents then use relative dates. At least this one has a tiny "last updated" timestamp at the bottom...?
- geenat 2y agoSupplementary, by a CSS grid expert: https://www.youtube.com/watch?v=EashgVqboWo https://www.youtube.com/watch?v=EashgVqboWo
- written-beyond 2y agoMight be the first time I've actually understood CSS grid. The numbering really helped! Great article! Will be referencing it often.
- treve 2y agoYou can make those numbers show up natively in Firefox too using the developer tools. (Not sure about chrome)
- xp84 2y agoI 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 agoIf you managed to understand floats (a rare feat) you'll have a blast with flex / grid :)
- kolme 2y agoFloats 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 agoEven 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 agoIf 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 agoThose articles are my bible. I have them almost memorised but for the more esoteric things I still consult them. Invaluable resource!
- zinglersen 2y agoThe interactive elements of the article made it click for me, the effort is much appreciated!
- indiantinker 2y agoSuperb article. Things are so clear. MDN/W3C should hire him to do this for many web concepts.
- Alifatisk 2y agoRelated: Grid Garden https://cssgridgarden.com https://cssgridgarden.com Flexbox Froggy https://flexboxfroggy.com https://flexboxfroggy.com
- djstein 2y agowhile I love CSS Grid and Areas I still think the hardest part is managing responsiveness especially between mobile and desktop sizes. I find that grid-template-area and the rows / columns sizes needs to be updated via JavaScript based on what UI elements should be open / full screen I haven’t found a world where minmax or calc fixes this. hope someone has answers!
- vim-guru 2y agohttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_contain...
- nicoburns 2y agoHave you tried media queries?
- bob1029 2y agoI have zero clue why this is downvoted. You can combine media queries and grid template areas to obtain arbitrary cross platform layouts without a single line of javascript.
- V99 2y agoThe way to go with this is to still use a grid, but make the row/col values be css variables ( "var(--foo)" ) instead of fixed values. Then you can update the value of just that variable from JS, and the grid will reflect it.
- afiori 2y agoI believe that many such cases can be solved by using :had() and/or subgrids, but I do not have too much experience in this
- trescenzi 2y agoI was surprised to not see the author call out how amazing template areas are for responsiveness. Using media queries lets you define different grid areas for different screens and then your elements can be moved to whatever layout you'd like for that screen size. If you need to hide an element at a certain size just give it display: none at that size. Here's a very simple example: https://codepen.io/trescenzi/pen/vYqpjvL https://codepen.io/trescenzi/pen/vYqpjvL.
- 5350-uiop-1130 2y agothings like justify-content, align-content, align-items, align-self confuse me, they change based on block and inline settings and the naming is also too indistinct. in the end i just find it frustrating. sometimes miss the days of table layouts. i think flex and grid are fine if you stick to the basics. but when you start having nested elements and things like display: content. things can become unmanageable.
- rado 2y agoIn Chrome DevTools, I just enter the required value (center/end) and scroll through the suggested properties until the desired effect is achieved. No need to remember them.
- patates 2y agoThis is exactly how I do it too but I'm not too proud about it. I can propose index changes in a postgres db and explain the reason behind performance improvements but I can't remember the CSS properties that'd put my content in the correct boxes.
- dugmartin 2y agoYou can also click on the little “flex” icon next to the display: flex property and bring up a ui that has all the flex properties (if, like me you can’t remember what property does what)
- nicoburns 2y agoThe naming is super annoying, but for Grid it is least a consistent mapping: - align-* is inline axis. - justify-* is block axis. - *-content is aligning grid tracks (rows/columns). - *-items is aligning individual children within their grid area.
- 5350-uiop-1130 2y agoi find it hard to remember that.
- jdthedisciple 2y agoProbably a cliché question at this point but isn't all of this solved more easily via flexbox?
- kevsim 2y agoThe main reason I tend to reach for grid is responsiveness. Makes it way easier to change the layout at different screen sizes.
- arcanemachiner 2y agoFlexbox -> 1-dimensional layouts Grid -> 2-dimensional layouts That being said, I use Flexbox for pretty much everything.
- rasso 2y agoKevin Powell has a few great videos on YT comparing flexbox to grid. Grid can be very powerful if you want overlapping grid areas. Something that was previously only possible using absolute positioning. Also, auto-fit and auto-fill
- emadda 2y agoOne thing flex cannot do well is white space: how do you leave a gap of content without spacer divs? This becomes more complicated when the number of divs is dynamic as flex determines position based on siblings. With grid you already have defined the “layout”, and you are just placing the div into the correct position. Grid does that in both axis too. So although you may be able to kind of replicate the 1d version with flex, it becomes much harder to align in 2D. I wrote an article about this: https://cssprinciples.com/3/grid/ https://cssprinciples.com/3/grid/
- kurtdev 2y agoWow, 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/ 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
- tomw1808 2y agoI 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?
- sapling-ginger 2y agoThe column number can be negative. 1--1 vs 1->-1 vs 1/-1 ?
- elteto 2y agoa: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.
- lionelw 2y agoDon't you think : is already used for something else in CSS?
- nsonha 2y agomaking excuse is easy, here is another one 1..3
- mixmastamyk 2y agoAnd what’s wrong with whitespace? Like every other property.
- nsonha 2y agorange(1, 3) might be more consistent, it's a single value that is a range and not 2 values. On a side note: a problem with CSS' claim to be a programming language is that the grammar is not obvious.
- lovegrenoble 2y agoWould like a tool like the one made for flexbox (to streamline the process of creating responsive layouts): https://flexboxcss.com https://flexboxcss.com
- robbiejs 2y agoWhat a brilliant blog. Author puts a lot of love in it, that's clear! Thanks for sharing, read the whole thing. Made me feel kinda stupid for not using CSS Grid more... ;-)
- iamgopal 2y agoOh my God. What we have done ?
- azangru 2y agoFixed CSS layout?
- weego 2y agoWe've handed visual layout markup to a bunch of software engineers who don't then consider that this should not be an engineering "language" when adding new features, which pushes closer to the hands of day to day engineers who then try and solve problems that shouldn't exist like portability and reusability. So we end up with a mishmash of nonsense that is neither simple enough for the intended user case nor smart enough to be able to be shifted to a higher level of engineering skill.
- frereubu 2y agoDoes anyone know why the numbers are the gaps rather than the columns / rows? It's not exactly rocket science, but it took me a while to wrap my head around that, and it would have felt more intuitive for e.g. an item taking up the first two columns to be 1/2 rather than 1/3. I wonder if that's something to do with being used to arrays starting at 0, and if it has to be columns then using 0/2.
- mixmastamyk 2y agoShould be 0-indexed or 1-indexed, but not mixed. Probably thought 1-indexed is more understandable to regular people.
- deskamess 2y agoIs 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'.
- JoeCianflone 2y agoLine 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”.
- masklinn 2y agoIf you scroll down just a bit, the article provides a live demo so you can play with the system and see what’s happening. 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.
- happytoexplain 2y agoWait, '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
- appointment 2y agoThe very first thing you need to know about CSS is that it uses the language of print layout, not programming. A lot of the problems programmers seem to have with CSS probably stem from this misapprehension.
- layer8 2y agoDo 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.) [0] https://en.wikipedia.org/wiki/Slash_(punctuation)#Numbering https://en.wikipedia.org/wiki/Slash_(punctuation)#Numbering [1] https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column#formal_syntax https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column...
- davidmurdoch 2y ago
- talkingtab 2y agoHighly recommended for CSS Grid is Jen Simmons Mondrian with auto flow. https://labs.jensimmons.com/2017/01-011.html https://labs.jensimmons.com/2017/01-011.html. Try 'C' and 'D' then change the window size. Also the youtube video that goes along https://www.youtube.com/watch?v=qNtJ5p3h2A4 https://www.youtube.com/watch?v=qNtJ5p3h2A4. 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?
- deleted 2y ago[deleted]
- fourthark 2y agoFor the invalid example in 3.2, I think the last line intends to say "sidebar" not "header". As it is, it's both discontiguous and missing an area.
- dalmo3 2y agoThis is a fantastic article, and highlights both why grid is fantastic, and how its syntax (and, more generally, CSS syntax) is so annoying. Why there must be SO MANY ways to write the same thing? There are two dimensions, and three parameters each - start, end, size. Then there are at least three ways to declare each parameter. And then... shorthand properties, what a mess. I always find it very hard to read someone else's grids. No matter how organised the dev is, the lack of an idiomatic way to write means there's always a very high cognitive load for parsing.
- mixmastamyk 2y agoYes, spec seems to be not polished. Wish you could use ids/tags to name areas instead of having to match area/class/grid-area three times. Folks must have missed school on DRY day. Also the "-template" names are a waste of typing when plural/singular is already enough to disambiguate grid from items.
- msie 2y agoThe guy fails to mention at the beginning what 1/3, 3/4 means.