[HN Gopher] Layout Breakouts with CSS Grid
___________________________________________________________________
Layout Breakouts with CSS Grid
Author : clairity
Score : 86 points
Date : 2022-10-11 16:38 UTC (6 hours ago)
(HTM) web link (ryanmulligan.dev)
(TXT) w3m dump (ryanmulligan.dev)
| willio58 wrote:
| Love how this is possible in such a clean way now. Layout
| breakouts are one of those things that look simple, but if done
| incorrectly can lead to terrible bugs, issues with scrollbars,
| etc.
| robertlagrant wrote:
| > Love how this is possible in such a clean way now.
|
| Yes. What I would've given for CSS functions 20 years ago!
| eyelidlessness wrote:
| I've used this technique, with some tweaks, and it's great. For
| my usage I generally want full-bleed sections to extend their
| _background_ but to have their inner content width the same (or
| close to the same) as normal content. It's trivial to do, but
| might not be obvious if you're not comfortable yet with CSS grid:
| you can nest the same technique, eg <div
| class="content"> <div class="full some-bg content">
| <!-- Container bg is full width, everything inside is normal
| width --> <div class="feature"> <!--
| Container bg is full width, everything inside is feature width
| --> </div> </div> </div>
| clairity wrote:
| right, but that's the old, divitis way of doing it. using grid
| this way let's you set all the children to the content width
| and then selectively break out of that with just a class on the
| child element (without extra divs).
|
| i use a responsive gutter in my default grid that is akin to
| the article's technique, for the same issue that sometimes you
| want a little padding and sometimes you want full bleed
| (usually for just the background). once subgrid comes to
| chrome, it will be even easier to control content width without
| divitis.
| eyelidlessness wrote:
| > right, but that's the old, divitis way of doing it. using
| grid this way let's you set all the children to the content
| width and then selectively break out of that with just a
| class on the child element (without extra divs).
|
| I think you may have misunderstood my comment. I'm saying you
| can use the grid technique described in the article _and nest
| the technique_ to achieve similar results _within sub-
| sections_. Note that I used the classes defined in the
| article. My stated use case is exactly "usually just for the
| background". My HTML only differs from the article's example
| HTML by adding the content class to the full-width element,
| and a class which would hypothetically add the background to
| that element. I didn't add any extra divs.
| clairity wrote:
| yah, that's the kind of thing subgrid is meant to solve. in
| my head, the structure looks more like:
| <body class="content"> <header
| class="popout"></header> <main></main> <!--
| implicitly in the content track --> <footer
| class="full"></footer> </body>
|
| you shouldn't have to add an extra div inside <main> to be
| able to use the parent grid. so you subgrid on <main> and
| get the benefits of just adopting the parent grid for
| popping things out, rather than nesting with extra
| divs/classes.
| eyelidlessness wrote:
| There is no extra div! The classes are necessary if you
| want to support the >90% of users whose browser supports
| grid but not su grid. My example, adapted to your
| preferred nomenclature, the "extra" classes renamed for
| their CSS functionality equivalent, and some content
| added: <main class="grid">
| <h1>I'm normal content width</h1> <p>Ideally
| you wouldn't need that grid class for this. But it keeps
| the CSS DRY for...</p> <section class="full
| some-bg grid"> <h2>I'm normal content width
| too</h2> <aside class="feature">
| <p>I'm "feature" width!</p> </aside>
| </section> <p>The "extra" class on the
| section above is <b>currently</b> necessary
| because...</p> <section class="full some-
| bg"> <p>Whoops, no subgrid support? I'm full
| width on 95% of browsers currently in use!</p>
| </section> </main>
|
| It'll be cool when those classes can go away. You can
| certainly just make `full` always apply the main grid
| styles if you have no use case for full width sections
| without a grid. Or even have distinct `full` and `full-
| grid` classes, but you're just swapping a character at
| that point.
| uallo wrote:
| > In the last version of my site, selected elements - images,
| code blocks, quotes - were made wider than the page content area
| using negative margins.
|
| Yes, negative margins are often (not always!) a bad idea.
| Especially for something like a full-bleed layout. The other way
| around makes much more sense and does not need Grid. Make
| selected elements narrower than the main section. That has worked
| for a long time and still works today.
___________________________________________________________________
(page generated 2022-10-11 23:00 UTC)