[lazyjeff]

So is it just me or is the syntax for css grid a bit clunky? I'm talking about specifying ranges using "1 / 4" to mean 1-3 inclusive, or having to separately specify grid-template-rows and grid-template-columns each time. It makes it both hard to learn in the first place, but also hard to remember for casual users (people who use it once a month or so for a new design).

Tables don't have the same issue -- once you learn the syntax for tables, you never forget. And even bootstrap is a bit more memorable. But css grid always requires a few trips to stack overflow.

Everything else about it is fantastic, but I wish they thought more about intermittent users.

[IggleSniggle]

While I agree with it not being as suitable for intermittent users as table, it is also much more powerful. And, you need not separately specify rows and columns.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...

And, if you find yourself repeating yourself, you can use variables!

[Vanderson]

I think it can be simple if you try to only solve a few things with grid.

When I first learned grid, I could only figure out one or two things. Then I got ok with a few things, then I went crazy and made a magic framework.

Now, I only use primarily these:

  display:grid;
  grid-gap: [value];
  grid-template-columns: 1fr max-content, etc...;

That is 90% of my use case for grid. For entire page layouts, I would use grid-area so I can place stuff where I want and move it around on mobile. Grid rows are implicit with the above code, so I so I have a mini-framework with utility classes for a few different column scenarios. (3 columns, column with compressed/flexible combinations for things like forms, etc...)