Live data from Hacker News

New layouts with CSS Subgrid

joshwcomeau.com

51–60 of 104 posts

Re: New layouts with CSS Subgrid

#52
post #42

Earlier quoted context omitted.

> A layout grid is not a table Ain't it? Rows and columns get you a table.

A table is for tabulating data. They have quite different meaning and purpose, even if they share a couple of characteristics.

Tabulate means to organize by rows and columns.

Layout grids organize data by rows and columns.

Re: New layouts with CSS Subgrid

#53
post #42

Earlier quoted context omitted.

> A layout grid is not a table Ain't it? Rows and columns get you a table.

A table is for tabulating data. They have quite different meaning and purpose, even if they share a couple of characteristics.

HTML spec couldn’t just have added a grid element?

Re: New layouts with CSS Subgrid

#54
post #24

Earlier quoted context omitted.

So is Grid supposed to be what we should use to replace the html element? That I still use to this day for layouts because CSS still sucks to me?

Use for tabular data, but for layout you should use grid. Grid doesn't have it's own element like table does, so you have to use css to apply that display to a div. CSS takes a bit of time to understand. It's cascading nature and how certain properties behave differently based on the html structure or display type or direction makes it tricky. I don't blame you sticking with tables for layouts for yourself - making l…

There were back in CSS 2 display values for table, table cell, table row etc which meant you could make divs or other block elements layout like tables did. Of course it wasn't supported in a certain browser with 90% market share.

Re: New layouts with CSS Subgrid

#56
post #42

Earlier quoted context omitted.

A table is for tabulating data. They have quite different meaning and purpose, even if they share a couple of characteristics.

HTML spec couldn’t just have added a grid element?

CSS grids are for presentation, HTML is for semantics. Ideally they are separated. That's why the use of tag is deprecated.

Re: New layouts with CSS Subgrid

#57
post #8
post #4

Earlier quoted context omitted.

And on the second one, you could use any other unit instead of fr for the image to set its width consistently, then fr on the text to have it use up whatever remains.

I also wasn't understanding the value looking at the first two examples, but the pricing packages example I do think I would struggle to implement in a clean way using traditional css.

I'd use . It literally is a table. And for mobile just do a media query to turn it into a flexbox.

Re: New layouts with CSS Subgrid

#58

Earlier quoted context omitted.

There's plenty of overlap, but they solve different problems: flexbox when the content should control element sizing/fit, grid when the container should control element sizing/fit.

Another way to think about it: flexbox is for alignment of boxes in one dimension: horizontally or vertically. CSS Grid is for two dimensional layout of rows and columns. Back in the day, developers wanted page layout instead of the hacks on top of hacks with table-based layouts, floats and positioning to create layouts. We’ve had CSS Grid designed for page layout on the web, in all browsers since 2017; as of 2022, o…

I use flexbox for grid purposes, simply because the syntax is straightforward and easy to read. Yeah, it’s one dimension, but if you nest it, it becomes two with no issues.

Re: New layouts with CSS Subgrid

#59

When I see the grid syntax, I just wanna jump off a cliff. Who created this abomination and why? We need trials to check whether these were the output of humans or some synthetics pretending to be humans.

I sympathize with your comment and imagine the overflowing downvotes as soon you openly critic the web/css/javascript and their people doing the standard. I watched tons of videos and read a lot on mdn about css grid, I don't touch it for a while I need to go back at it again... After tables/floats/abs positioning eventually convoluted flex we should have stopped and review what the heck people were doing on w3c, it's artificial complexity we don't deserve that

Re: New layouts with CSS Subgrid

#60
From the example:

  .grid {
    display: grid;
    grid-template-columns: 35% 1fr 1fr 1fr;
  }

  .grid header {
    grid-row: 1 / 3;
  }

  .grid ul {
    grid-row: span 2;
    grid-column: span 3;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
  }
I swear you that I had less hard time reading x86 assembly code or even c++ templates. I mean what the hell? Then if you go look at another example:

> @media (max-width: 32rem)

I know what rem means, I just don't know what the hell MAY mean, that alone in a big project will make you hate your job as sometimes it's more easier predicting what the response of an LLM may be than what styling an element will have on a live page

[Edit] I'm not confusing rem with em, em are even worse, but still hard predicting what a rem might be, before arguing we shouldn't I'd like to stress out we should once it's used like that "@media (max-width: 32rem)"

[Edit2] Instead of just downvoting why don't you reply with your counter arguments? I really am interested in hearing what you have to say

Post reply on HN