I have build a CSS Grid for a dialog scene. I use max-content
feature of grid-template-columns
to ensure, that the longest speaker name defines width of the left column.
The problem is the .stage-director
column which has no speaker name. With the current setup, the statement of the stage director defines the max-content of the left column which makes no sense.
Is there a way to ignore the .dd.statement.stage-director
content for the max-content
- calculation?
dl {
display: grid;
grid-template-columns: max-content auto;
grid-column-gap: 1em;
grid-row-gap: 1em;
}
dt,
dd {
margin: 0;
padding: 0;
}
.speaker.stage-director {
display: none;
}
.statement.stage-director {
grid-column: span 2;
}
<dl>
<dt class="speaker">ROMEO</dt>
<dd class="statement">What, shall this speech be spoke for our excuse? Or shall we on without a apology?</dd>
<dt class="speaker stage-director"></dt>
<dd class="statement stage-director">This is a long statement of the stage director</dd>
<dt class="speaker">ROMEO</dt>
<dd class="statement">Give me a torch: I am not for this ambling; Being but heavy, I will bear the light.</dd>
<dt class="speaker">The magic big cat</dt>
<dd class="statement">I say nothing</dd>
<dt class="speaker">MERCUTIO</dt>
<dd class="statement">Nay, gentle Romeo, we must have you dance.</dd>
</dl>
https://jsfiddle.net/ahe_dev/k8rfhtpj/3/
Instead of max-content auto
you can use auto 1fr
and white-space:nowrap
like below:
dl {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
grid-row-gap: 1em;
}
dt, dd {
margin: 0;
padding: 0;
}
.speaker {
white-space:nowrap;
}
.speaker.stage-director {
display: none;
}
.statement.stage-director {
grid-column: span 2;
}
<dl>
<dt class="speaker">ROMEO</dt>
<dd class="statement">What, shall this speech be spoke for our excuse?
Or shall we on without a apology?</dd>
<dt class="speaker stage-director"></dt>
<dd class="statement stage-director">This is a long statement of the stage director</dd>
<dt class="speaker">ROMEO</dt>
<dd class="statement">Give me a torch: I am not for this ambling;
Being but heavy, I will bear the light.</dd>
<dt class="speaker">The magic big cat</dt>
<dd class="statement">I say nothing</dd>
<dt class="speaker">MERCUTIO</dt>
<dd class="statement">Nay, gentle Romeo, we must have you dance.</dd>
</dl>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With