Fractionele eenheden fr in CSS-grids
Waarden gespecificeerd in eenheden fr
kunnen een fractionele vorm aannemen. Laten we
het vorige voorbeeld aanpassen door voor
de tweede en derde kolom een breedte
in fractionele getallen in te stellen:
<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: 1fr 0.5fr 2.5fr;
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 derde kolom
1.5 keer groter is dan de eerste
en de tweede.
Stel dat je grid drie kolommen heeft.
Zorg ervoor dat de tweede kolom
1.5 keer groter is dan de eerste,
en de derde kolom 2.5
keer groter dan de eerste.
