Mit einem CSS-Responsive-Grid-Generator funktioniert die Mathematik?

Question

Ich versuche zu verstehen, wie die Mathematik, wie dies in CSS Grid-Generatoren funktioniert ein: http://www.responsivegridsystem.com/calculator/

Mit 12 Spalten und 1% Marge es zeigt wie:

.span_12_of_12 { 
    width: 100%; 
} 

.span_11_of_12 { 
    width: 91.58%; 
} 
.span_10_of_12 { 
    width: 83.16%; 
} 

.span_9_of_12 { 
    width: 74.75%; 
} 

.span_8_of_12 { 
    width: 66.33%; 
} 

.span_7_of_12 { 
    width: 57.91%; 
} 

.span_6_of_12 { 
    width: 49.5%; 
} 

.span_5_of_12 { 
    width: 41.08%; 
} 

.span_4_of_12 { 
    width: 32.66%; 
} 

.span_3_of_12 { 
    width: 24.25%; 
} 

.span_2_of_12 { 
    width: 15.83%; 
} 

.span_1_of_12 { 
    width: 7.416%; 
} 

ich die Zeilen berechnen kann, ohne Rand, aber ich versuche zu verstehen, wie man den Rand in die Gleichung einfügt.

Die Argumentation ist, ich möchte dies alles in eine Mixin/for-Schleife in meinem Sass setzen, so dass ich eine beliebige Anzahl von Spalten in einem Raster angeben kann.

Answer 1

Hier verwenden sie ca. Berechnung.

Berechnung eines von 12 grid = 7,416%

1. Die Gesamtgröße des Rasters beträgt 100%
2. Wenn Spanne beträgt 1% dann ist die Gesamtspanne von Gitter 11%
3. Rastergröße ist (100 %) - Margin (11%) = 89%
4. Um durch Teilen 89%/12
5. Ergebnis ist die Größe von 1 grid zu finden 7,416%

Jetzt 2 von 12 grid = 15,83%

1. Zweite Gitter berechnen = 7,416% + 7,416% = 14,832%
2. Im zweiten Gitter wir Marge von 1% hinzuzufügen, weil, wenn wir zwei Gitter der Marge kombinieren zwischen sie kollabiert, so dass die Gesamt 14,832% + 1% = 15,832%

SAME FÜR dIE NÄCHSTE GRIDS

ist