News for hackers. Stuff that matters.

A comment on Flexbox and Grids: your layout’s best friends. Parent comment

Re:Flexbox and Grids: your layout’s best friends by Nition on Monday November 06, 2017 @11:12PM (#15641031)
Man, you could almost have done this back in pre-CSS days with tables, if you didn't mind setting the total width of the whole thing including margins instead of just the inner width.

   <table style="width:75%"> // Total width of all three
      <tr>
        <th width="50%">LeftMargin</th>
        <th width="25%">Main</th>
        <th width="25%">RightMargin</th>
      </tr>
   </table>
How far have we really come?
[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by c-smile on Monday November 06, 2017 @11:33PM (#15641100)
Exactly. 10 years we were told how dangerous are tables.

In the same 10 years (http://www.w3.org/TR/css-flexbox-1/) we were trying to come up with something that can be used instead. And have got that ugly flexbox.

And still... were are my col/rowspans?

Something is terribly wrong with the process.

[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by gjjrfcbugxbhf on Tuesday November 07, 2017 @02:06AM (#15641534)
Well the table based layout does not work on mobile. The float, flex or grid based layouts do.

So we've come somewhere but there is further to go and maybe we didn't need to go in so many circles.

[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by Nition on Tuesday November 07, 2017 @04:15AM (#15641951)
What's broken with table layouts on mobile? I just tested my code above on Safari on iOS 10 and it displayed as expected.

Here's the live HTML I uploaded for testing: http://momentstudio.co.nz/temp/test.html

This page we're on now also runs mostly on tables.

[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by losvedir on Tuesday November 07, 2017 @09:06AM (#15643423)
> What's broken with table layouts on mobile? I just tested my code above on Safari on iOS 10 and it displayed as expected.

Depends what you'd expect, I suppose. These days, I'd expect the columns to switch to a vertical stacking layout when viewed at a mobile width. I guess maybe it's not "broken", per se, but it's not responsive and certainly pretty limited in how it can be used.

[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by c-smile on Tuesday November 07, 2017 @12:40PM (#15645555)
What stops you from declaring

   table { display:block; }
etc. if you need to transform your table into vertical flow layout?
[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by gjjrfcbugxbhf on Tuesday November 07, 2017 @01:33PM (#15646107)
Or even...

.responsive { display: block }

@media(min-size: 768px) { . responsive { display: table }}

[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by kowdermeister on Tuesday November 07, 2017 @05:22AM (#15642208)
Go use tables, it's a free world. Col/Rowspans are there in the Grid specification, give the article a go linked by OP.

The only thing got wrong is that it took a bit long, but current CSS layout techniques are totally awesome today.

[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by ams6110 on Tuesday November 07, 2017 @11:50AM (#15644967)
Tables were/are never wrong for displaying actual tabular content.
[ Parent | on HN ]
Re:Flexbox and Grids: your layout’s best friends by darkmarmot on Tuesday November 07, 2017 @09:24AM (#15643564)
It's been 20 years and we STILL don't have tables with a fixed header in the HTML spec. We deserve a better standards body -- or an entirely new layout system.
[ Parent | on HN ]