Margini in una griglia con larghezza automatica dei blocchi in CSS

Supponiamo di avere una griglia con quattro blocchi per riga:

.child {
	width: 25%;
}

Aggiungiamo ai nostri blocchi margini in percentuale orizzontalmente e verticalmente:

.child {
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Per il momento, ciò che abbiamo fatto non funzionerà correttamente, poiché la larghezza totale dei blocchi e dei margini supera il 100%. Per un funzionamento corretto dobbiamo sottrarre da ciascun blocco una certa parte, per fare spazio ai nostri margini. Calcoliamo queste parti.

Nel nostro caso, risultano quattro blocchi, e tra di essi tre margini - da uno e mezzo percento ciascuno. Per calcolare la parte da sottrarre, è necessario dividere il margine totale per il numero di blocchi:

1.5% * 3 / 4 = 1.125

Allora la larghezza di ciascun blocco sarà:

25% - 1.5% * 3 / 4 = 23.875%

Risulterà il seguente codice:

.child {
	width: 23.875%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Possiamo non calcolare questo margine noi stessi, ma delegare il lavoro di calcolo alla funzione calc:

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Anche la larghezza del blocco la facciamo calcolare alla funzione calc:

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Imposta la larghezza dei blocchi in percentuale in modo che nella griglia ci siano tre blocchi per riga, e tra di essi una distanza di 3%.

Imposta la larghezza dei blocchi in percentuale in modo che nella griglia ci siano sei blocchi per riga, e tra di essi una distanza di 0.5%.

Imposta la larghezza dei blocchi in percentuale in modo che nella griglia ci siano quattro blocchi per riga, e tra i blocchi ci sia una distanza di 30px.

Imposta la larghezza dei blocchi in percentuale in modo che nella griglia ci siano cinque blocchi per riga, e tra i blocchi ci sia una distanza di 50px.