Pixels en fr-eenheden in CSS grids
De breedte van kolommen kan
tegelijkertijd in pixels en
fr worden ingesteld:
<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>9</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 1fr 50px;
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
100px inneemt, en de overige
twee kolommen even groot zijn.
Stel dat je grid vier kolommen heeft.
Zorg ervoor dat de eerste en laatste
kolommen 100px innemen,
en de overige kolommen de resterende
ruimte verdelen, zodat de derde kolom 1.5
keer groter is dan de tweede.
