Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Grid – Table layout is back. Be there and be square

developers.google.com

Post reply on HN
Print view View original

71–80 of 280 posts

Re: CSS Grid – Table layout is back. Be there and be square

#71

Post by mbrock »

panic wrote: post #67
lomnakkus wrote: post #40

Earlier quoted context omitted.

While that would probably work fine for display and layout, but it doesn't work so well with the semantic document model that the web is built on. For example accessibility would suffer greatly unless every "jquery" (using your analogy) out there were to implement its own accessibility. (That's not to say things are absolutely peachy wrt. accessibility these days, but they'd get a lot worse if everybody had to implem…

I think there's a distinction to be made between "web pages" and "web apps". Web pages like news articles and blog posts fit well in the semantic document model of HTML. Web apps extend past this model -- something like DPS would make more sense for them.

I think the lack of such a clear distinction is part of the web's success. For example, is Facebook a web page or a web app?

Re: CSS Grid – Table layout is back. Be there and be square

#72

Post by e12e »

This doesn't really fix much - if the idea is to continue to use pixel-based positioning. I've got devices with a range of dot-pitches (surface 4 pro, external older monitor, cellphone) - with various physical screen sizes -- A "150px sidebar" doesn't work the same across these devices - and more importantly, for a low-resolution 24" screen I'd probably want a similar 3" side-bar as for a "retina"-resolution 24" screen?

But at least we seem to be moving forward from the abuse of [ed:float]-layouts for grid-systems...

Re: CSS Grid – Table layout is back. Be there and be square

#74

Post by yellowapple »

einr wrote: post #60
mattmanser wrote: post #54

Earlier quoted context omitted.

That's the problem. This argument was over a decade ago and it's because it's a nightmare to work in tag soup. I still have to deal with tables for layout on mail templates, bloody Outlook, and that extra 2 layers of tag nesting you have to do on every level quickly turns the code into an incomprehensible mess, even with careful indentation. And if you're not very careful with indentation it turns into an utter night…

That's a problem to be sure, but sometimes I wonder if this is much better:

It's not, clearly. Modern "grid-based layout" frameworks are just the next generation of table-driven web layouts, and they're frequently shoehorned into webpages in ways that hearken back to the olden days before CSS was invented.

is one of my least favorite things to see in HTML, in particular. No shit it's a container; all HTML tags are containers. HTML5 introduced all these wonderful semantic elements precisely so that we don't have to pollute HyperText documents with thousands of divs.

Also, that "text-center" class drives me to drink :)

Re: CSS Grid – Table layout is back. Be there and be square

#75

Post by dom0 »

leppr wrote: post #48
orbat wrote: post #39

Earlier quoted context omitted.

What, exactly, is the problem with the tag in the first place? Been a long, long time since I last touched HTML

It's neither flexible nor semantic. Flexibility is what allowed webpages to be "responsive" before media-queries even existed, and semantics is what allows accessibility, search engines, and other html parsing tools ("readability" in Firefox and Safari, ...) to function better. The only advantage it has is that it's old and predictable. That's why it's still used to format emails for instance, it's reliable and works…

Most divsoup-layouts are not semantic at all, either.

Re: CSS Grid – Table layout is back. Be there and be square

#76

Post by douche »

pilif wrote: post #49
matt4077 wrote: post #35

This is excellent. And with the fast pace of browsers, and the improved habits of users (or automatic updates), it should be available for 95%+ of users within a year (It's in the current Safari Technology Preview, so Safari should get it with the next macOS point update). This is also a good moment to remind people that you don't need Bootstrap and the like as much as you used to. Grids were 90% or the reason people…

> it should be available for 95%+ of users within a year only if you don't have enterprise customers. Those will continue to run IE11 for the foreseeable future as IE11 will remain supported in Windows 10 until 2025. While Microsoft is pushing Edge as an IE replacement, Edge is still lacking features and looks too different from IE for companies to feel comfortable pushing it to their users without retraining them.

> only if you don't have enterprise customers. Those will continue to run IE11 for the foreseeable future as IE11 will remain supported in Windows 10 until 2025.

We're still supporting IE9... It was a glorious day when we could finally give up on IE8.

Re: CSS Grid – Table layout is back. Be there and be square

#77

Post by nailer »

ddebernardy wrote: post #17
nailer wrote: post #7

> Short of taking care of sizing the elements yourself, sadly, you can't have both a vertical and horizontal rhythm by just using flexbox alone. Accompanied by https://developers.google.com/web/updates/images/2017/01/css... I'm pretty familiar with Flex but I simply don't understand and the diagram doesn't help. What does 'rhythm' mean in terms of layout? Taking a guess (which I shouldn't be), I can make https://deve…

OP is likely referring to vertical rhythm in typography: https://zellwk.com/blog/why-vertical-rhythms/

Yes but that just uses it in the commonly understood sense of repetition. And you can very obviously achieve vertical and horizontal repetition using flex. Either they have a more specific meaning or they're trying to say something that's not quite apparent.

Re: CSS Grid – Table layout is back. Be there and be square

#78

Post by kagamine »

einr wrote: post #60
mattmanser wrote: post #54

Earlier quoted context omitted.

That's the problem. This argument was over a decade ago and it's because it's a nightmare to work in tag soup. I still have to deal with tables for layout on mail templates, bloody Outlook, and that extra 2 layers of tag nesting you have to do on every level quickly turns the code into an incomprehensible mess, even with careful indentation. And if you're not very careful with indentation it turns into an utter night…

That's a problem to be sure, but sometimes I wonder if this is much better:

That's a problem for sure but last week I looked into creating a family tree with the basics of HTML and CSS and the following nested lists seems to be the best solution according to forums. Now, try to add into these nested lists some siblings(the people kind) and some new branches as you discover people in census reports from 100 years ago. Now add in a newborn. Is this the best we can do? (apologies, but I haven't the time to tab this correctly, link to Codepen at the end):

    
      
        
          Parent
            
              
                Child
                  
                    
                      Grand Child
                        
                          
                            
                              
                                Child
                                  
                                    Grand Child
                                      
                                        Grand Child
                                        
                                          
                                            Great Grand Child
                                          
                                          
                                            Great Grand Child
                                          
                                          
                                            Great Grand Child
                                          
                                        
                                      
                                      Grand Child
Lifted from here: https://codepen.io/chuongdang/pen/lcnsC

Re: CSS Grid – Table layout is back. Be there and be square

#79

Post by einr »

e12e wrote: post #69
einr wrote: post #60

Earlier quoted context omitted.

That's a problem to be sure, but sometimes I wonder if this is much better:

It's not. There were a few arguments against "table layout", some of which apply to hn as well IMNHO. Added tags without semantic value (just as your div-soup above also illustrates). Layout speed (in reality not much of an issue now - and also an issue with deeply nested tags with complex layout). Both are fixed in modern html5 which moves (back) towards simple, semantic, document layout (html-body-article-heading-e…

I look forward to trying modern flexbox and grid layouts. I have not had the privilege (?) to work with either yet; our customers are not necessarily on the bleeding edge of browser releases so I have to stay a little behind the curve. Hence, a lot of div soup and ridiculous indentation levels.

Honestly, for what I'm doing (a pretty complex web app with an almost desktop-style GUI with a bunch of buttons, text inputs and checkboxes everywhere) a Bootstrap-style div layout gets at least as verbose and messy as a table layout would. I especially hate having to always do HTML comments with class/id names after every so I know what closes what when I'm near the bottom of the file. At least with tables you get instead of .

But of course a div layout is at least partially semantic and mobile/small screen friendly.

In a classic table layout, there's an extra top level element in addition to "body" - the surrounding table.

In practice, any bog-standard div layout today has a at top level which contains nothing but other divs and sets size and positioning for the whole page. This is roughly equal to a , no?

Re: CSS Grid – Table layout is back. Be there and be square

#80

Post by fennecfoxen »

einr wrote: post #60
mattmanser wrote: post #54

Earlier quoted context omitted.

That's the problem. This argument was over a decade ago and it's because it's a nightmare to work in tag soup. I still have to deal with tables for layout on mail templates, bloody Outlook, and that extra 2 layers of tag nesting you have to do on every level quickly turns the code into an incomprehensible mess, even with careful indentation. And if you're not very careful with indentation it turns into an utter night…

That's a problem to be sure, but sometimes I wonder if this is much better:

You can mitigate this about 50% by switching from pure Bootstrap to something like Bootstrap-Sass and inheriting selected rules on something semantic like .

(But then you'll hit a wall as you try to deal with the containers and subcontainers.)

Post reply on HN