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