Nu de CSS-rasterlay-outmodule binnenkort in Firefox en Chrome wordt geleverd, dacht ik dat ik zou proberen te begrijpen hoe ik het moet gebruiken.
Ik heb geprobeerd een eenvoudig raster te maken met één item adat de linkerkant van alle rijen beslaat, met de andere items (b, c, d, e, enz.) die zich over de rechterkant van afzonderlijke rijen uitstrekken. Het aantal items aan de rechterkant van de rijen is variabel, dus er kan elke combinatie zijn van b, c, d, e, enz., dus ik gebruik de eigenschap grid-auto-rows. Als zodanig kan ik geen vast aantal rijen definiëren voor a, maar ik zou graag willen dat aallebeschikbare rijen beslaat.
#container {
display: grid;
grid-auto-flow: column;
grid-auto-rows: auto;
grid-template-columns: [left] 4rem [right] 1fr;
margin: 0rem auto;
max-width: 32rem;
}
#a {
background: lightgreen;
grid-column: left;
grid-row: 1 / auto;
justify-self: center;
}
#b {
grid-area: auto / right;
background: yellow;
}
#c {
grid-area: auto / right;
background: pink;
}
#d {
grid-area: auto / right;
background: lightskyblue;
}
#e {
background: plum;
grid-area: auto / right;
}<div id="container">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
<div id="e">e</div>
</div>Antwoord 1, autoriteit 100%
Ik had dezelfde situatie en vond een schone oplossing.
Probeer in plaats van een enorm rijbereik te gebruiken:
grid-column: 1/-1;
Omdat een negatief getal vanaf rechts telt, specificeert deze code de grid-columntot aan het einde van de laatste kolom.
Opmerking: als dit niet van toepassing is, bekijk dan de oplossing van Jonny Green in de onderstaande opmerking.
Antwoord 2, autoriteit 9%
bewerken:vind dit antwoord niet erg, tenzij je over een verouderde browser gaat😉
U zou een grote waarde van rij kunnen gebruiken om (tenminste zoveel als u denkt dat het maximum aantal rijen zou kunnen zijn) te overspannen:
grid-row: 1 / -1;19/12 , werkt nog steeds niet in FF.
Bewerkengrid-row: 1 / -1;is nu ook beschikbaar in de nieuwste Firefox. een grote waarde omspannen is niet meer nodig om op Firefox-gedrag te letten.
#container {
display: grid;
grid-auto-flow: column;
grid-auto-rows: auto;
grid-template-columns: [left] 4rem [right] 1fr;
margin: 0rem auto;
max-width: 32rem;
}
#a {
background: lightgreen;
grid-column: left;
grid-row-start: 1;
grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
justify-self: center;/* ? what did you mean here ? */
/* did you mean : */
display:flex;
align-items:center;
}
#b {
grid-area: auto / right;
background: yellow;
}
#c {
grid-area: auto / right;
background: pink;
}
#d {
grid-area: auto / right;
background: lightskyblue;
}
#e {
background: plum;
grid-area: auto / right;
}<div id="container">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
<div id="e">e</div>
</div>