SCSS Grid
21. März 2017

Ich habe mir ein SCSS Grid Mixin geschrieben, da ich andere Grids (und da habe ich doch ein paar ausprobiert) auf irgend eine Weise nicht flexibel genug fand. Das liegt daran dass sie häufig klassenbasiert arbeiten und man, um Responsiveness vernünftig zu implementieren, viel mit javascript arbeiten muss, was wiederum auf die Performance geht (und irgendwie unsauber gelöst ist).

Mein Ansatz sieht so aus:

@mixin cols($columns, $gutter) {
  /* Positioning */
  position: relative;
  display: inline-table;
  /* Sizing */
  box-sizing: border-box;
  width: 100%/$columns;
  /* Gutters */
  margin: 0 !important;
  padding: 0 $gutter $gutter 0;
  border: none !important;
  /* Typography */
  letter-spacing: 0;
  > * {
  /* Wrapper inside Element needed
  because of gutter >* */
  max-width: 100%;
  box-sizing: border-box;
}
}

Verwendet wird es dann so:

article.single, article.page {
  @include cols(3, 5%);
}

Im Parameter $columns wird die Anzahl der Spalten eingegeben, die entstehen sollen, im Parameter $gutter ein Prozentwert als Steg zwischen den einzelnen Spalten.
Angewendet wird es direkt auf die Elemente, die die Spalten bilden sollen. So lassen sich auch Spalten innerhalb Spalten realisieren oder Wechsel der Spaltenanzahl.
Das ganze funktioniert meistens ohne Probleme, ab und zu gibt es die Situation dass beispielsweise ein Leerzeichen zwischen den Spalten ausgegeben wird, diese sind dann aufzuspüren und zu löschen, weil in diesem Fall zu früh umgebrochen aufgrund der (meistens) 4px pro Spalte zu viel im Layout. Also Vorsicht beim HTML ausgeben und nicht verzweifeln. 😉

UPDATE

Das letter-spacing macht auch gerne Probleme,
wenn es möglich ist sollte es bei den Elementen bei 0 liegen.