Why do you put styles in the code playground HTML and CSS file? I was staring at the first subgrid example’s CSS file for ages trying to figure how anything special was applied to the ul element.
New layouts with CSS Subgrid
81–90 of 104 posts
Re: New layouts with CSS Subgrid
#82I never found it comfortable to work with grids. The syntax and layout just feel off. Flexbox is a much more flexible and easy thing to work with.
I also find it much simpler to make responsive designs with flexbox than with grid.
Re: New layouts with CSS Subgrid
#83When 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 simply ignore it and use flexbox without any issues.
Re: New layouts with CSS Subgrid
#84Re: New layouts with CSS Subgrid
#85Re: New layouts with CSS Subgrid
#86When 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.
Layout Land [1] is a great set of videos that explains CSS Grid [1]: https://m.youtube.com/layoutland
Why does it need explaining, when it has to be self explaining and not some overcomplicated mishmash. Like someone was under the influence of psychedelics when working out the specifics.
We had to wait 15 years for proper positioning in css. Same shit repeated again.
Re: New layouts with CSS Subgrid
#87When 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.
It's quite straightforward to find the discussions that lead to the specs, if you're interested in participating.
So it went thru multiple people and they all said in unison: well, this is all ironed out, easy to use and looks ok. We did a great job!
Just mind boggling. I get it, maybe they want to create extra jobs, by adding complexity, hence more people are required for a role, but why keeping up the illusion? Fucking alter the economic systems if this was the goal.
Re: New layouts with CSS Subgrid
#88From 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…
Put me on a C++/asm project and I'd have a hard time making heads or tails of it. So what? Your comment comes off as very angry without any meaningful critique of the article's central topic other than you had a hard time understanding it.
1rem is equal to the same number of pixels anywhere on a given page and, generally speaking, across pages on a given site. If you don't know what the value is it only takes a minute to find out. If you're writing CSS that'll be used on unknown pages, you either a) shouldn't care and just scale relative to whatever root font size the consumer set or b) should set your own size/scale, at build time or with custom properties. REMs have been around and standard practice for 10 years.
Re: New layouts with CSS Subgrid
#89From 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…
Put me on a C++/asm project and I'd have a hard time making heads or tails of it. So what? Your comment comes off as very angry without any meaningful critique of the article's central topic other than you had a hard time understanding it. 1rem is equal to the same number of pixels anywhere on a given page and, generally speaking, across pages on a given site. If you don't know what the value is it only takes a minut…
> 1rem is equal to the same number of pixels anywhere on a given page and, generally speaking, across pages on a given site.
That's not true, first of all the root font size might not be immediate to query and find out what it is, second it might change because of variables on the root or base font size might be percentage/rem based itself not necessarily in pixels and finally setting it in pixels doesn't take into consideration zoom levels, or OS-level font settings.
> REMs have been around and standard practice for 10 years.
I know but thanks for flexing it out, in fact I'm arguing that css is and has been bad for many years
Re: New layouts with CSS Subgrid
#90From 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…
Grid is a DSL certainly, but it's a very useful DSL to learn. I'd even argue that people skip Flexbox or forget everything they (think they) know about Flexbox and just learn CSS Grid.
One of the first callouts in the article is a suggestion to read the same site's interactive guide to CSS Grid if you aren't familiar with it: https://www.joshwcomeau.com/css/interactive-guide-to-grid/
> 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)"
`rem` is "just" the root Em, the em in the root font size (the font size of the `` tag itself). In most browsers, with no `` override (or `:root { font-size: X; }` stylesheet) that defaults to 16px.
In the Bootstrap 3/4-era responsive breakpoints you often see something like `@media (max-width: 512px) {}` to mean "mobile width". The reasons to migrate those sort of breakpoints to `rem` units instead include 1) adapts to custom browser settings (a user may set their default font size larger, for instance, for visual acuity reasons, which can be a useful accessibility desire), 2) adapts in some situations to zoom settings (browsers are allowed to style the website at a higher zoom as if the user had chosen an equivalent larger base font size), and 3) in the "retina screen" world where resolutions on a phone screen may be higher than desktop resolutions despite smaller screen size, using "roughly 32 `M` characters wide" is a better intuition than "exactly 512px wide" (and mobile browsers can lie a bit less about their pixel widths to meet your breakpoint assumptions).
You can back-of-the-envelope math `X rem * 16 px/rem` to get a pixel approximation if you need one, and that estimate will hold in a lot of cases in a majority of browsers, but leaves the browser more flexibility in adapting to adapting to user desires and hardware quirks than raw pixel counts.