Is a global grid with 'auto wrapping" subgrid possible?
codepen:
https://codepen.io/elmcrest/pen/ExMLeLW
I'm experimenting with a new layout trying to get a global grid to work with multiple subgrids.
I'm not sure if the description makes that much sense so I just try to explain everything and hope for the best.
when there's enough space, the four
class="keyword" elements (just keywords as follows) just stay in a single row. when the viewport gets more narrow they should wrap just if it would be a flex container with auto-wrap.
but here the four keywords are in a subgrid and consume the outer main-grid's columns and rows, so it's possible in other places to match the grid, f.e. a heading or whatever you like. In the example the "p" in the heading aligns perfectly with the "P" for Python, or "R", "D" and "J" depending on the viewport width.
I couldn't find a better or cleaner solution yet, if there's even one? So that's the question - is there a better way to do this?
disclaimer: this is an experiment and doesn't aim for production quality robustness and quality...30 Replies
mmm interesting
I'm not sure I get the point of the pseudo elements being a "gap" when we can just use gap property?
Have you seen Kevins video on grid-template line names?
nope, not yet ... actually just started with this course and joined here
but, yeah, you're right, nice!
I didn't like it in first place
I've been playing more with something like this > https://youtu.be/cf-J4ffMBfo?si=gIsVay4ZNBju9Npa, because we had to wait so long on subgrid. So I would do something similar in subgrid too though.
Kevin Powell
YouTube
Probably the most underrated (and useful) CSS feature
Looking to step up your CSS games? I’ve got free and premium courses to help you out! 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=named-grid-lines
I don’t think I’m alone in not using named grid lines very often. They are something I dismissed early on because I figured line numbers were good enough and f...
ah, wait - with
::after I could support gaps with different heights based on (surrounding?) line-heights ... but I have no idea if that's a "valid" assumption from a Designer's perspective - that's above my understanding 😄I mean I like that its unique honestly ...
Nothing wrong with having a different method long as it makes sense, otherwise use the tools we have.
holy 🐮 😄
I was asking genuinely to see if you had a specific reason for using ::after for the spacing.
I started with it but discovered the "line-height" property along the way - it was more like "at least this would be possible" ... so I guess I'll get rid of it
Well so common patters are to have
margin-top or ya just gap in the gridyeah, gap
I try to get away without any margins
but paddings will be needed
I guess
but wait
row-gap doesn't work :think:
is that Kevin thinking?
few things you wanna watch out for too
you are using <span> then naming it paragraph xD
just use <p>
semantics > all
yeah
row-gap doesn't work since I'm at time consuming more than a single row with a single subgridI would limit the columns and rows to only be something that gets content, unless you need to overlap
yeah, that was just more convenient compared to setting margin:0 on p ... 😄
its not though
you have to type more (naming the class and adding stuff) and using the wrong html cause span is a inline-block
you mean grid-row: span 12?
yea don't do that 12 grid stuff
but then I'll need javascript
For what?
I was hoping
grid-row: span auto was possible, but it's either not in the spec or just not working - the subgrid doesn't allocate more rows from the parent grid even if it needs to
so you need to manually expand span n as needed, depending on the number of children in that subgridI mean I don't really get the need for subgrid here either though 😄
yeah, it's more about to explore the limitations than actually using it
Yea for sure
I was running into not having subgrid roughly 5-7 years ago ... when grid was new
but to solve this, probably today most straight forward would be with a flex container instead of the subgrid and making sure that column size and child width match with css custom properties ... they're great
ok, calling it a day - nice to meet you! 🙂
na still grid but you don't need to get some complicated around it 😄
Watch that video I linked it might give you some ideas
in it he is using :inherit but you can just use subgrid.
Yeah that‘s my bedtime task 😂
Oh that‘s great. Didn’t realize the potential of named lines until now, thx for sharing.
ok, from a first try there are some gains with named lines - f.e. it's easy to have empty cells - but there's now a major drawback, I have to assign a child a class to point it to the right space in the layout - which breaks my semantic approach (if that makes sense) ... in the example there is the combined element of a keyword having an icon and a name. with my initial example I can change the order in HTML without having to touch the CSS, with named lines that's not possible anymore I think
I could use of course
:nth-child somehow now, we'll seebut this results then in columns not being drawn to the bottom, if there are less children, see screenshot:
bottom right corner - the column on the right should have background color just as the one on the left
with empty elements, cells are rendered again. so I guess with
nth-child() you kind of reverse the approach where you can have empty cells (compared to as mentioned above when given children an identifier class)
so, anyone who's interested - I solved it now with repeat auto-fit and it works quite nice I'd say ...
I'm still planning to iron out a consistent line-height or row height for the last layout polish, but anyways...
have a look at https://raesener.de and let me know if I should paste the html file here (the whole website a single file)