Einfaches 5-Spalten-Raster (Grid)
von Oliver Richter (Kommentare: 0)
Hier stelle ich ein sehr einfaches 5-Spalten-Raster vor, wobei es sich um eine prozentuale Aufteilung der Spalten handelt. Das Beispiel hier liegt in einer Basis-Version vor und sollte den entsprechenden Layoutkonditionen angepasst werden (z.B. maximale Breite des Layouts, Layout-Breaks usw.). Bei Bildschirmbreiten ab 620 Pixel (ohne Scollleiste) werden pro Reihe nur noch eine Spalte dargestellt, es rutschen also alle Spalten untereinander.
Es wird auf das Border-Box-Modell zurück gegriffen, sollte also ab Internet Explorer 8 funktionieren.
Spalten können Links- und Rechtsabstände in der Größe von Spalten-Breiten aufweisen und Spalten können ineinander verschachtelt werden.
Hier nun die Stylesheet-Anweisungen für das Grid
/***** Start: Grid (5er-Prozent-Grid) *************************************/
.grid-row { clear: both; margin: 0px 0px 10px 0px; }
.grid-row:before, .grid-row:after { display: block; content: ""; clear: both; }
.grid-row .grid-row { margin-bottom: 0; }
.grid-row .col-20p { width: 20%; float: left; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid-row .col-40p { width: 40%; float: left; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid-row .col-60p { width: 60%; float: left; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid-row .col-80p { width: 80%; float: left; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid-row .col-100p { width: 100%; float: none; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid-row .lm-20p { margin-left: 20%; }
.grid-row .lm-40p { margin-left: 40%; }
.grid-row .lm-60p { margin-left: 60%; }
.grid-row .lm-80p { margin-left: 80%; }
.grid-row .rm-20p { margin-right: 20%; }
.grid-row .rm-40p { margin-right: 40%; }
.grid-row .lm-60p { margin-right: 60%; }
.grid-row .rm-80p { margin-right: 80%; }
@media screen and (max-width: 619px)
{
.grid-row .col-20p, .grid-row .col-40p, .grid-row .col-60p, .grid-row .col-80p, .grid-row .col-100p { width: 100%; float: none; }
.grid-row .lm-20p, .grid-row .lm-40p, .grid-row .lm-60p, .grid-row .lm-80p, .grid-row .rm-20p, .grid-row .rm-40p, .grid-row .rm-60p, .grid-row .rm-80p { margin-left: 0; margin-right: 0; }
}Hier einige Markup-Beispiele für die obigen CSS-Anweisungen
Als erstes der Standard-Fall: Es gibt mehrere Spalten mit unterschiedlicher Breite:
<div class="grid-row">
<div class="col-20p">20% Breite</div>
<div class="col-60p">60% Breite</div>
<div class="col-20p">20% Breite</div>
</div>
<div class="grid-row">
<div class="col-60p">60% Breite</div>
<div class="col-40p">40% Breite</div>
</div>
<div class="grid-row">
<div class="col-80p">80% Breite</div>
<div class="col-20p">20% Breite</div>
</div>Und hier ein Beispiel für eine Spalte mit einem Rechtsrand:
<div class="grid-row">
<div class="col-60p lm-20p rm-20p">60% Breite + 20% Links- und Rechtsrand</div>
</div>Und hier ein Beispiel, bei dem in den beiden Spalten sich jeweils wieder zwei weitere Spalten befinden:
<div class="grid-row">
<div class="col-60p">
<div class="grid-row">
<div class="col-40p">40% v. 60% Breite</div>
<div class="col-60p">60% v. 60% Breite</div>
</div>
</div>
<div class="col-40p">
<div class="grid-row">
<div class="col-40p">40% v. 40% Breite</div>
<div class="col-60p">60% v. 40% Breite</div>
</div>
</div>
</div>Ein vollständiges und kommentiertes Beispiel finden in der folgenden ZIP- bzw. HTML-Datei:
Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Einen Kommentar schreiben