Pixels en fr-eenhede in CSS-roosters
Dit is moontlik om die breedte van kolomme
gelyktydig in pixels en
fr toe te ken:
<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;
}
:
Gestel jou rooster het drie kolomme.
Maak dat die eerste kolom
100px inneem, en dat die ander
twee kolomme ewe groot is.
Gestel jou rooster het vier kolomme.
Maak dat die eerste en laaste
kolomme 100px inneem,
en dat die oorblywende kolomme die oorblvende
ruimte so deel dat die derde kolom 1.5
keer groter as die tweede is.
