Percentages en fr eenheden in CSS grids
Naast fr kunnen ook
waarden in % worden gebruikt,
die eveneens bepalen welk deel van
de container de kolom zal innemen.
Hierbij wordt eerst de grootte van
de kolom in % berekend,
en de resterende vrije ruimte wordt
verdeeld in fracties:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Stel dat je grid drie kolommen heeft.
Zorg ervoor dat de eerste kolom
20% inneemt, en de overige
twee kolommen even groot zijn.
Stel dat je grid vijf kolommen heeft.
Zorg ervoor dat de eerste
kolom 100px inneemt,
de tweede kolom 20%,
en de overige kolommen de resterende
ruimte verdelen zodat elke kolom
twee keer zo groot is als de vorige.
