Pixel e unità fr nelle Grid CSS
È possibile impostare la larghezza delle colonne
contemporaneamente in pixel e
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;
}
:
Supponiamo che la tua grid abbia tre colonne.
Fai in modo che la prima colonna
occupi 100px, mentre le altre
due colonne siano della stessa
dimensione.
Supponiamo che la tua grid abbia quattro colonne.
Fai in modo che la prima e l'ultima
colonna occupino 100px,
e che le colonne rimanenti dividano lo spazio
rimanente in modo che la terza colonna sia 1.5
volte più grande della seconda.
