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
Ian UK
Ian UK12mo ago
No description
ἔρως
ἔρως12mo ago
grid doesnt wrap, but flex does
Jochem
Jochem12mo ago
that's simply not true grid does wrap
Jochem
Jochem12mo ago
No description
Jochem
Jochem12mo ago
now RE: a DL, it's a bit more complicated because you want to keep the DT and DD together
Ian UK
Ian UK12mo ago
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 👍
Jochem
Jochem12mo ago
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!
ἔρως
ἔρως12mo ago
thats not wrapping: you have 3 columns
Jochem
Jochem12mo ago
yes it is: there's five items, three on the first row, two on the second you'll notice it's
1 2 3
4 5
1 2 3
4 5
if that's now that wrapping is, I don't know what is
ἔρως
ἔρως12mo ago
wrapping is when it overflows
ἔρως
ἔρως12mo ago
yes like that i stand corrected: grid does wrap
Kevin Powell
Kevin Powell12mo ago
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:
<dl class="course-details">
<div>
<dt class="mt-1">Starts</dt>
<dd class="mt-1"> September</dd>
</div>
<div>
<dt class="mt-1">Entry Requirements</dt>
<dd class="mt-1">
<p>Standard: AAB</p>
<p>Access: ABB</p>
</dd>
</div>
/* etc */

</dl>
<dl class="course-details">
<div>
<dt class="mt-1">Starts</dt>
<dd class="mt-1"> September</dd>
</div>
<div>
<dt class="mt-1">Entry Requirements</dt>
<dd class="mt-1">
<p>Standard: AAB</p>
<p>Access: ABB</p>
</dd>
</div>
/* etc */

</dl>
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)
ἔρως
ἔρως12mo ago
thats both interesting, horrifying and kinda cool
Ian UK
Ian UK12mo ago
damn, I thought I read the spec on definition lists but apparenlty I didn't that makes the problem so much easier 😄 thanks
Want results from more Discord servers?
Add your server