71–80 of 104 posts
How is this different to, and better than using nested grids?
With subgrid the rows and columns of two sibling grids are aligned with each other by glueing them to the rows and columns of the parent grid.
Earlier quoted context omitted.
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.
With nested flexbox the nested dimensions are not aligned to each other. With grid the items are aligned across both each row AND each column. With subgrid even nested grids can be aligned across nesting levels.
Earlier quoted context omitted.
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…
> Grid doesn't have it's own element like table does, so you have to use css to apply that display to a div. 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 tag…
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?
Random grid gotcha that drove me crazy some time ago: due to browser bugs we can't use elements with percentage widths or heights as grid items. The grid cell dimensions get blown out to the ones of the original image. Seen in both Firefox and Chromium. Relevant FF bug is probably https://bugzilla.mozilla.org/show_bug.cgi?id=1857365 ' grid item with percentage height, "width: auto", "grid-template-columns: auto", and…
so if the img has a specific size set in width and height attributes or via css, and that size is not percentile or auto, the problem doesn't exist? I'm just confused by the "original image's width".
> " elements with percentage widths or heights"
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.
But in terms of functionality, I'm sure there are plenty applications for this!
Subgrid is really cool, but I want to note that for the first trivial example, you could make the children participate in grid layout by doing ul { display: contents } it's more efficient, if you don't need subgrid features, but still want the nested element structure for other reasons.
Yes, for that specific example it works. But in general, this essentially deletes the UL from the layout entirely. It won't be stylable[0] and it won't dispatch UI events that occur on it specifically. One example of a reason you might want such an element to still participate in layout is to use that element as an area highlighter. Or you might make it a scrollable section; subgrid makes sticky-header tables rather…
Earlier quoted context omitted.
One subtle thing worth adding is that display: contents also changes how accessibility trees are constructed. The element is removed from the visual layout and from the accessibility tree in many browsers, so semantics like list grouping, landmarks, or ARIA roles can disappear unless you re-introduce them manually. That’s why subgrid ends up filling a different niche: you preserve the DOM structure, preserve accessib…
Yeah this is a good callout. My understanding is that display: contents is not meant to impact the accessibility tree but there is a long and ongoing history of browser bugs that make me not want to use it for elements that have an accessible role
Earlier quoted context omitted.
Yeah, to expand on that... Flex is, well, flexible, whereas Grid is more rigid like a table. The rigidity of Grid allows you to span rows and columns (2D) just like you can with table cells (colspan/rowspan). Grid is usually used at a macro level for its more deterministic layout (no unintuitive flex quirks), while flex is usually used to lay things out at a component level where you don't care that the next row of i…
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?
https://l-wortley0811-dp.blogspot.com/2010/10/comic-layoutsj...