Using CSS Grid where appropriate (revisited) | Hacker News Reader

Using CSS Grid where appropriate (revisited)

silvestarbistrovic.from.hr

24 pointsgk113 comments

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.

>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.

Have you used implicit rows/columns? You can specify new rows or columns for x new items, the rows/columns are then added automatically for new elements.

Yes, and for some things (auto rows) it works great almost always, just not mixing auto columns, auto rows and flexible widths with unknown number of items.

I love it for things like multiple column forms with a combination of labels and inputs. This works great when I know I want 4 columns. a max/1fr max/1fr (with auto rows) gives me columns and rows that flow with unknown sized labels and inputs like this:

  Label | Input       Label | Input   
  Label | Input       Label | Input  
  Label | Input       Label | Input

But for some things it just doesn't work very well like when you have a gallery of images. I really, really want this to work, so I haven't given up on grid for this, but making an unknown number of columns based on a variable widths in a multi-screen layout just sucks the life out you.

Here's an example article from css-tricks on this topic, but notice you have to either give up flexible number of columns, or flexible widths, you can't have both. If you have both, you have flexbox. :P

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fil...

I don't think that grid will be able to do that, you'd need some kind of state aware component or function in your compiler/SSG that updates the state of your "mosaic" based on your own settings, so that it can calculate the best possible layout as new items are added to your site and then render/generate it.

I dont't completely understand your explanation, but flexbox does fill in the few spaces left by grid. (in my experience)

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/

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

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!

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.

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.

Is CSS grid an alternative to flexbox?

No, but also yes... in the way that a table or div elements and css styles are also alternatives to flexbox.

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.

No. Flexbox works in only one direction at a time while grid is designed for whole areas.

Reply on news.ycombinator.com