Unità fr nei CSS Grid

Le dimensioni delle righe e delle colonne nella grid possono essere impostate non solo in px, ma anche nelle unità di flessibilità fr (frazione). L'uso di queste unità significa che tutto lo spazio disponibile per il posizionamento degli elementi sarà suddiviso in parti uguali o frazioni. Ogni elemento potrà prendere una certa parte di questa suddivisione. Vediamo come si fa.

Utilizzando la proprietà grid-template-columns facciamo in modo che la prima e la seconda colonna della grid occupino una parte del contenitore, e la terza colonna - tre parti:

<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 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Supponiamo che la tua grid abbia due colonne. Fai in modo che abbiano la stessa larghezza.

Supponiamo che la tua grid abbia tre colonne. Fai in modo che abbiano la stessa larghezza.

Supponiamo che la tua grid abbia tre colonne. Fai in modo che la terza colonna sia due volte più grande della prima e della seconda.