Grid question, wrapping when using grid template-rows
Hey, I've not used grid so much so bear with me, I'm styling a definition list and have got it looking exactly how I want it, however I want the dt + dd items to wrap onto a new line when overflowing horizontally.
I guess my question is, is this possible with using grid-template-rows? and if so please impart me with your knowledge ❤️
example code is https://codepen.io/brumgb/pen/XWOpKEx
15 Replies
grid doesnt wrap, but flex does
that's simply not true
grid does wrap
now RE: a DL, it's a bit more complicated because you want to keep the DT and DD together
Thanks for the reply @Jochem much appreciated, yeah this is where I'm struggling, usually I'd just wrap with a div to make my life easier but I'm trying to make hte HTML as semantic as possible 👍
I'm honestly not good enough with grid to know a solution off the top of my head, and don't really have a ton of time to dive into it right now, sorry :/ It's admirable to make your code more semantic, definitely a good thing to do!
thats not wrapping: you have 3 columns
yes it is: there's five items, three on the first row, two on the second
you'll notice it's
if that's now that wrapping is, I don't know what is
wrapping is when it overflows
https://codepen.io/jochemm/pen/ExrZrdv like this?
yes
like that
i stand corrected: grid does wrap
According to the spec, you are allowed to have
<div>
inside of a dl
. The only contraint seems to be if a div is used, the only direct children of that dl
have to be divs, and the dt
and dd
have to all be grandchildren of the dl
, so you could do this, which should make it a lot easier:
The spec, incase you're interested: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element (the 3rd and last examples use divs)thats both interesting, horrifying and kinda cool
damn, I thought I read the spec on definition lists but apparenlty I didn't that makes the problem so much easier 😄 thanks