[runarberg]

How would you have done differently in the grid spec?

You don't have to use named grid areas if you don't like. But honestly, why wouldn't you. grid-template-areas makes working with grid a walk in the park imo.

Also very few of us web devs know all of CSS by heart. We use tools and reference manuals all the time as we are working. I suspect no python developer knows all of python either and are constantly looking at documentation or hints from their language server/IDE. The real skill is knowing where to look, not what to write.

[thundermuffin]

Just want to preface this with this is all my opinion, and I know I'm not necessarily correct at all.

If I were given free reign, I would have tried to do some different naming for properties like grid-auto-rows/grid-auto-columns/grid-auto-flow. My internal way of thinking about how the first two control the height & width, respectively, don't line up with how I view the word "auto" in other places in CSS.

I also feel like there should have been a true shorthand for just creating an mxn grid. That's one of the biggest reasons I enjoy Tailwind because I can just say "grid grid-cols-3" and get a 3 column grid without me having to explicitly say I want them all even. I would have probably been naïve and made it work closer to the old column-count where giving it a unitless number and it makes it equal in the space; on top of that, I'd then layer the actual spec so you could do variable sized rows/columns.

The other thing I would have done would have been to focus time and effort on finding a way to easily reverse a grid. I know you can use the rtl/ltr hack to do it, and that grid being a 2-axis display method brings a lot of hard questions about "what does reversing a grid mean?". I know names could help here, but it just doesn't make sense in a CMS environment where editors can place as many or as few items in a grid as they want, so I can't just do "a b" -> "b a" based on media query, because there could be columns C through F, too, and I want them all reversed. Thankfully, this is mostly a mobile problem when they're stacked, so I can just switch to flexbox and column reverse, but still would've been nice to have an easier way to do this as the amount of SO posts I remember seeing for this indicated to me that folks did want this feature.

To answer why I don't use grid-template-areas often, I just don't find myself in a lot of situations where naming has made it easier. I guess I could do this kind of thing, but then everyone else is going to ask "where does a/b/c come from?", haha.

    "a a b b"
    "a a b b"
    "c c c c"

[runarberg]

Seems like you are looking for grid-template-columns: repeat(3, 1fr). I honestly don’t see a problem with the 1fr part here. I don’t know what you mean with variable sized rows/columns, because you can already do something like:

    grid-template-rows: auto var(--some-length) fit-content(30ch) minmax(12ch, auto) 1fr;

While I admit reversing the flow of grid items is a bit more verbose than flex items, it is still a pretty trivial thing to do, if you have named areas, you simply change the order of the area names, if you have explicit columns/rows you can just use negative indices for your grid-column/grid-row. If you have implicit columns/rows, you should probably be using flex (as—unlike grid—flex-direction: row-reverse also adjusts the scroll position) and a subgrid (though I will admit, grid-auto-flow: row-reverse should probably be an option; perhaps you can raise that with the CSSWG if you have a clear use case).

I can see the appeal of Tailwind for developers that don’t feel like becoming experts in CSS layout. However a lot of us frontend devs have spent quite some time studying CSS layout and do know how to work with it to get a desired layout. In my opinion, CSS grid is a resounding success story. I use it all the time in my job without any major issues. Did it take time to learn? Yes it did, I even ordered a whole book on the subject as I was studying it (https://abookapart.com/products/the-new-css-layout). Me personally, I would get insulted if my team decided to go with tailwind, as I would feel left out from my area of expertise. And that now instead of using what I know about CSS, I’m forced to learn a whole new system, and consult new documentation that I’m not familiar with.

[thundermuffin]

It isn't necessarily a "problem", but I personally am a fan of keeping simple use cases as simple as possible. In my eyes, bringing the syntax to barebones makes it easier to read and more maintainable for these ultra simple use cases (for instance this 3x3 equally sized grid).

    grid-rows: 3;
    grid-columns: 3;

Is it an excruciating pain to need to currently type repeat(3, 1fr)? Nope, not at all, and I'd gladly do it if my team wanted to plain CSS or SASS, but to me that statement doesn't feel nearly as succinct or (dare I say) elegant as other areas of CSS, such as:

    margin: 2rem;
    padding: 1rem 0.5rem;

What I meant by variable sized rows & columns was to keep the rest of the spec as close as possible to what it is now, but layered on top of my suggested simpler syntax from above. That way if I wanted to do something that isn't just n equal-sized columns, I could just write out

    grid-template-columns: 1fr 2fr 1fr;

and it would work as CSS grid currently does. It's the best of both worlds!

I'm also a frontend developer who has spent a pretty significant chunk of time studying CSS. Maybe I gave off the impression that I'm too incompetent to learn the latest features of the language and write them in plain CSS, but that wasn't what I meant. It is way more that I find little pleasure in writing CSS compared to other frontend responsibilities.

Am I happy and grateful that grid, container queries, and the rest of the new features exist? Yes, I am, and grid is one of the tools I reach for the most. In the end, I only had tiny things I wish could have been different about it after using it and realizing "rats, that syntax could have been made a tiny bit simpler for how I use it a lot of the time," or wishes for features that would just make life easier even if the current way of doing things is trivial.

Haha, you know what they say, different strokes for different folks! I didn't feel insulted in the slightest when our lead frontend developer suggested we give Tailwind a trial run. As a group, we were searching for a way to have consistency and a friendlier developer experience[0] throughout our many different projects & internal tools, but without having to bike shed with 10 different frontend developers or saddle someone with the responsibility of adding new CSS helpers as features rolled out (and the inevitable bike shedding that would happen every time). Some of my coworkers were upset about it because they prefer CSS and styling over JS and other frontend bits, but I think even the most fervent "vanilla CSS/SASS or nothing" holdout came around when she had to cover a project while someone was on vacation, and she found a level of consistency and naming that hadn't existed in our codebases.

--

[0] A couple of very old projects in a siloed team had a CSS guru building his own framework in SASS, but it's utility left a lot to be desired. In my opinion, you can't even place all of the blame on him, because his project was extremely standalone (and therefore had lulls when waiting for approvals and this was a way to pass the time and learn) and the company had very little guard rails to prevent this sort of thing. The combination of a small development team splintered between many different projects (no guidelines stating "this is how we are going to do this as a group" existed), everyone being overworked and burned out, and larger projects "winning" eyes of senior developers who held them to higher standards left him in a spot where I think he believed wholeheartedly that he was making a maintainable masterpiece that would end up being used in the rest of the projects when he finally finished it. Sadly, the framework never reached anything resembling a production-ready v1.0, but it did showcase some of his impressive knowledge of CSS.