Pixlar och fr-enheter i CSS-grid
Ställa in bredden på kolumnerna kan
göras samtidigt i pixlar och
fr:
<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;
}
:
Antag att ditt grid har tre kolumner.
Gör så att den första kolumnen
tar upp 100px, och de övriga
två kolumnerna var av samma
storlek.
Antag att ditt grid har fyra kolumner.
Gör så att den första och sista
kolumnerna tar upp 100px,
och de återstående kolumnerna delade på det återstående
utrymmet så att den tredje kolumnen var 1.5
gånger större än den andra.
