Nicht zu viel nachdenken Gitter

Die überwiegende Mehrheit der Websites da draußen verwendet ein Raster. Sie haben möglicherweise kein explizites Rastersystem, aber wenn sie einen „Hauptinhaltsbereich“ nach links und eine „Seitenleiste“ nach rechts verschieben, ist das ein einfaches Raster.

Wenn sich ein komplexeres Layout ergibt, greifen die Leute oft nach einem Gitter-Framework. Sie gehen davon aus, dass Gitter super schwierige Dinge sind, die am besten Super-CSS-Nerds überlassen bleiben. Diese Idee wird durch die Tatsache aufrechterhalten, dass viele der Gitter-Systeme, nach denen sie greifen, *sehr* kompliziert *sind*.

Beachten Sie, dass dieser Artikel 2012 veröffentlicht wurde. Floats waren immer noch die primäre Methode für ein Rastersystem, und dieser Artikel konzentriert sich auf *wirklich* einfache Methoden dafür, wie das einfache Verschieben von vier 25%-Elementen und nicht das Verrücktwerden mit Mathematik und exotischen Gutter-Systemen. Heutzutage würde ich dringend empfehlen, CSS Grid oder Flexbox für Ihr Rastersystem zu verwenden, wenn Sie überhaupt ein abstrahiertes Raster erstellen müssen. Es ist wohl noch einfacher und definitiv flexibler und leistungsfähiger.

So baue ich Gitter. Es ist nicht schwer oder kompliziert. Selbst das flexible Gestalten ist keine große Sache.

Kontext

Ein Block-Level-Element ist so breit wie das übergeordnete Element, in dem es sich befindet (width: auto;). Wir können es als 100% breit betrachten. Der Wrapper für ein Raster hat wahrscheinlich nichts mit Semantik zu tun, es ist nur ein generischer Wrapper, daher ist ein div in Ordnung.

<div class="grid">
  <!-- 100% wide -->
</div>

Spalten

Beginnen wir mit einem praktischen und häufigen Bedarf: Ein Hauptinhaltsbereich, der 2/3 der Breite hat, und eine Seitenleiste, die 1/3 der Breite hat. Wir erstellen einfach zwei Spalten-Divs mit entsprechenden Klassennamen.

<div class="grid">
  <div class="col-2-3">
     Main Content
  </div>
  <div class="col-1-3">
     Sidebar
  </div>
</div>

Damit sie nebeneinander liegen, müssen wir sie nur verschieben und Breiten zuweisen. Wir können beide so auswählen

[class*='col-'] {
  float: left;
}

und die individuelle Breite so

.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}

Das ist die ganze Prämisse, Gitter nicht zu überdenken.

Kontextbereinigung

Das übergeordnete Element kollabiert auf null Höhe, da es nur verschobene Kinder hat. Lassen Sie uns das beheben, indem wir es bereinigen. Heutzutage brauchen Sie nur noch das

.grid:after {
  content: "";
  display: table;
  clear: both;
}

Gutter

Der schwierigste Teil bei Gittern sind Gutter. Bisher haben wir unser Gitter durch die Verwendung von Prozentwerten für Breiten flexibel gemacht. Wir könnten die Mathematik kompliziert gestalten und auch Prozente für Gutter verwenden, aber persönlich mag ich keine prozentualen Gutter, ich mag feste Pixel-Gutter. Außerdem versuchen wir, zu viel Denken daraus zu vermeiden.

Der erste Schritt dazu ist die Verwendung von box-sizing: border-box;. Ich verwende es gerne für absolut alles.

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Jetzt, wenn wir eine Breite einstellen, bleibt dieses Element trotz angewandtem Padding oder Rahmen *diese* Breite.

Der zweite Schritt ist das Anwenden eines festen Abstands auf der rechten Seite aller Spalten außer der letzten.

[class*='col-'] {
  padding-right: 20px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}

Das ist alles, was es für grundlegende Gutter gibt.

Außen-Gutter

Brauchen Sie Gutter außen? Ich verwende gerne eine Opt-in-Klasse dafür

<div class="grid grid-pad">
  Grid with outside gutters also
</div>

Schritt eins ist das Hinzufügen eines linken Abstands zum Gitter-Elternteil (und optional oben und unten).

.grid-pad {
  padding: 20px 0 20px 20px;
}

Schritt zwei ist das Wiederherstellen des rechten Abstands der letzten Spalte.

.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}

Mehr Spaltenauswahlen

Super einfach

.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

Machen Sie, was Sie wollen. Stellen Sie nur sicher, dass die Spaltenbrüche sich zu 1 addieren. Ja, ein wenig Nachdenken, aber einfacher als sonst.

Sass

Ich benutze es hier nicht intensiv, aber das Ganze wird mit SCSS/Compass noch etwas prägnanter.

* {
  @include box-sizing(border-box);
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;
  
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

Module

Ich arbeite gerne mit diesen Gittern mit „Modulen“.

<div class="grid">
  <div class="col-2-3">
     <article class="module">
        stuff
     </article>
     <article class="module">
        stuff
     </article>
  </div>
  <div class="col-1-3">
    <aside class="module">
       Sidebar stuff. Sub modules?
    </aside>
  </div>
</div>

Es fühlt sich gut an, Inhalte auf diese Weise in Bits aufzuteilen. Der positive Nebeneffekt ist, dass jedes Modul seinen eigenen Abstand haben kann, wodurch Text von den Rändern des Gitters ferngehalten wird.

Ergebnis

Hier ist eine Demo auf CodePen.

Browser und Sonstiges

Funktioniert in IE 8 und höher und allen anderen Standarddingen. Wenn Sie IE 7-Unterstützung benötigen, müssen Sie etwas anderes tun =).

Außerdem wird Flexbox dies noch einfacher und besser machen (in verschiedenen Aspekten, einschließlich der Neuanordnung nach Bedarf), aber ich denke, wir brauchen noch etwa ein Jahr, bis wir daran denken können, es zu verwenden.

Verwandt

Schauen Sie sich OOCSS Grids an.