
Using CSS Grid where appropriate (revisited) - gk1
https://www.silvestarbistrovic.from.hr/articles/using-css-grid-where-appropriate-revisited/
======
RobertRoberts
CSS grid is the single most valuable addition to layout on the web in the past
20 years. Flexbox was a stop-gap for layout, but because adoption was so slow,
it couldn't replace floating and other silliness before grid took hold. (thank
you evergreen browsers)

But, grid is nearly useless in a very few circumstances, mainly when you don't
know how many items are going to be in a particular space. Grid has a
flexibility for dimension flow and positioning, but rigid in the number of
columns, rows and areas. (I know about auto-fit/auto-fill, but it's really
finicky with dimensions and unknown quantities compared to just using flexbox)

Next comes sub-grids... I hope it's built as well as grid is. Love the control
and consistent output from grid. The conclusion of this article was just odd
though.

~~~
mistersquid
CSS grid is a certainly a great addition to the CSS specification, especially
as it enables web page layout similar to page layout software for print such
as Adobe InDesign.

However it's a bit odd to say it "is the single most valuable addition to
layout on the web in the past 20 years" given that the CSS specification was
published 22 years ago. [0]

For comparison, David Shea's CSS Zen Garden was launched in 2003, 15 years
ago. Which means that the mainstream proof of the use case for layout being
separable from markup (sans tables) is only 15 years old.

I'm all about CSS grid's features and affordances, but I think CSS Zen Garden
was a watershed moment and arguably more important than CSS grid alone, which
was just 15 years ago.

I'm honestly not trying to troll, just trying to be precise about the history
of the development of CSS. Given a twenty-year timeframe, your first sentence
is pretty close to claiming that CSS grid is the most valuable addition to web
layout, period.

However, I think developments even more recent than 20 years ago are arguably
more influential to web layout than CSS grid, though CSS grid is certainly a
mighty tool.

[0] [https://www.w3.org/Style/CSS20/](https://www.w3.org/Style/CSS20/)

EDIT: Add apostrophe to mark possessive. Fix misspelling. Change "that" to
"than" in 4th paragraph.

~~~
RobertRoberts
I appreciate the critical argument balance, I was wondering if I came off
inaccurately. I meant to emphasize _layout_.

CSS Zen Garden changed my life with web design. But it wasn't based on a
single feature, it demonstrated simply how CSS worked already. I had the same
"wow, that is totally awesome" experience seeing CSS Zen Garden as I did when
I made my first really solid grid layout work and truly understood what it was
doing.

I started with web design in a time where a guy came an interviewed where I
worked and he was bragging about how he got his perfect 1 pixel border around
an area (I _think_ it was an image) using tables. A full table with TDs all
around with background color in them to make a border... This is the time I
started in. It was a brutal time for page layouts, and dialup modems were the
norm. (for you young whipper-snappers that is slower than 3g, or even 2g, on
ur fancy mobiles)

So tables were the end all be all of _layout_. Then years later designers
started using floating elements to make multi-column layouts. This lasted the
longest period of time for me. Then flexbox came along, but it was messed up
and for a webdesigner, if only half your clients can see a layout, you can't
use it.

Then Flexbox was fixed, and I started using it. But it had odd edge cases
where it just didn't work perfectly for layout, but it was better than floats,
but not perfect for layout.

Then grid came along. A spec _designed_ for page _layout_. It's feature set
are created so you can place something exactly where you want it, and it will
stay there, flowing with everything else where you put it. Nothing before this
worked so well.

So when I say the best thing to happen for "CSS _layout_" in the past 20
years, I really do mean exactly that. I could elaborate, but I have to get
back to work. :) Cheers!

~~~
mistersquid
Thank you for that fantastic clarification of layout and _layout_.

Used with your emphasis, I find myself agreeing. CSS layout (small "l") really
is a group of features, and what could be achieved using floats and flexbox
really was an approximation for what is considered fundamental in computer
layout software for print (e.g. Adobe Pagemaker).

Your emphasis on CSS _Layout_ (capital "L", though I like your _ notation,
too) really highlights that placing elements with strict control over
placement and flow had been virtually impossible until CSS grid.

So, I don't think it's too much an exaggeration to say that CSS grid makes CSS
_Layout_ possible. Before CSS grid, CSS (multi-column) layout could be
simulated but the control and precision required for CSS _Layout_ just wasn't
there.

In other words, I completely agree with you when you say CSS grid is

> the best thing to happen for "CSS _layout_" in the past 20 years.

That really is a perfect way of putting it.

EDIT: Rewrite last paragraph so it’s not so stiff and stilted.

------
wruza
Grid is good at identifying cells’ regular sizes to prevent wrapping or
overflow, so it could be used instead of a table for tabular data with no
sizing troubles. CSS fit-content and max-content to the rescue.

But as usual, bitter part is that grid is restricted to maximum of 1k rows in
webkit-based and to 10k rows in firefox browsers and that restriction will be
retained, as it seems from discussion. Columns are restricted too, but that is
less important. After the limit browsers simply draw all remaining cells at
the same coordinates and also mess with cell widths.

So, web still cannot show tabular data like desktop toolkits from '90s.
Flexbox is also a 20+ years late clone of GtkBox with most terms renamed. It
is amazing how web rotates around bells and whistles and ignores basic
business needs for decades.

------
ericand
Is CSS grid an alternative to flexbox?

~~~
gramstrong
It shouldn't be, AFAIK they should be used together. Use CSS grid for general
layout of multiple elements on a page or area. Use flexbox to style something
that suits a row or column.

When you find yourself nesting flexboxes, switch to CSS grid would be my
advice.

