61–70 of 104 posts
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…
Earlier quoted context omitted.
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.
This took two seconds to make https://codesandbox.io/p/sandbox/5ry4rl
I do agree though that subgrid makes the HTML more readable though so I'm all for it.
> This is mind-bending stuff, but it becomes intuitive with a bit of practice.
The problem is not the language, it's just that you did not spend enough time to learn it the proper way.
Earlier quoted context omitted.
Yes and no. layouts were a hack that solved a real problem but came with massive downsides. People didn’t tell you to not use to lay out content because grids are bad (they are quite handy! take a look at Grid Systems by Josef Müller-Brockmann) but because both posed technical and accessibility problems. A layout grid is not a table (or a ). A table (with and without ) comes with attached semantics, hierarchy, readin…
> A layout grid is not a table Ain't it? Rows and columns get you a table.
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…
Well, OOTB, yeah. I personally like to make use of custom html elements a lot of the time for such things. Such as etc, and apply css styles to those, rather than putting in classes onto divs. Feels a lot more ergonomic to me. Also gives more meaningful markup in the html. (and forces me to name the actual tags so I use much less unnecessary ones)
Impossible without subgrid, either you need to have fixed heights or calculate heights with JS, but neither is elegant or simple, especially if you have react components and adhere to modular design, and you need to have those components agree on sizing.
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.
Tabulate means to organize by rows and columns. Layout grids organize data by rows and columns.
“Tabulate” doesn’t just mean organising anything by rows and columns, it means organising data for a particular purpose. And layout grids usually end up looking quite different to tables because although they have a broadly similar underlying structure, the purpose is quite different.
This sounds useful, but the example of the feature rows reminds me how sad it is that CSS sometimes requires adding information about the document structure to make a layout work. In this case the number of rows.
is grid intended to replace flex at some point or live side by side
Live side by side unfortunately. I personally however always use grid, flexbox sucks.
Earlier quoted context omitted.
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.