CSS. Grid 960 System

Wenn Sie einen Quellcode und Stylen vom Template anschauen, finden Sie wahrscheinlich die Klassen wie: “grid_6”, “grid_8”. Das ist die Klassen vom Grid 960 System. Dann schauen wir mal, was es eigentlich ist und was es anbieten kann.

Das 960 Grid System (sogenannte Raster-System) ist bestimmt eines der meist verwendeten CSS Grid-Systeme. Der Darstellungsbereich des 960 Grid System ist auf 960 Pixel Breite festgelegt. Es gibt verschiedene Varianten des Layouts. Die meist verwendeten sind 12- ,16- und 24- spaltigen Grids.

Wie Sie sehen, passen die Layout-Blöcken die Grid-Spalten an. Mit den verfügbaren-Klassen lässt sich das Website-Layout mit nur wenigen Handgriffen Ihren aktuellen Wünschen anpassen.

Verwendung

Jedes Template mit Grid-System hat eine grid.css Datei, wo sich die spezifischen Klassen befinden. Mal sehen, wie man mit dem Grid-System arbeiten kann.

Zunächst öffnen Sie die grid.css Datei

Am Anfang dieser css-Datei stehen:

columns:24
Column width:30
Gutter width:10

Auf der Informationsseite der initialen Dateien gibt es den Anzahl der verwendeten Spalten, die Spaltenbreite und die Abstandbreite zwischen den Spalten.

Dann finden Sie die Klasse .container_24{} – diese Klasse benutzt man für den Container, wo den ganzen Inhalt Ihrer Webseite ist.

Hinweis: die Hauptklasse soll den Name container_12 oder container 16 haben (Es hängt vom Anzahl der Spalten an)

Danach sind die Klassen .grid_1, .grid_2 usw. – diese Klassen legen die Breite von inneren Blöcke fest. Die Blöcke mit den grid-Klassen sollten innerhalb von Blöcken mit der container_24 Klasse platziert werden.

Die Klasse definieren die Breite von Blöcken:

.container_24 .grid_2 {

width:70px;

} 

Zum Beispiel ist es den Code vom nachfolgenden Layout:

<div class="container_24">

<div class="grid_9">Some content</div>

<div class="grid_15">Some content</div>

<div class="grid_12">Some content</div>

<div class="grid_12">Some content</div>

</div>

Es gibt die folgende grid-Klassen in diesem HTML-Layout:

.container_24 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

.container_24 .grid_9 {
	width:350px;
}

.container_24 .grid_12 {
	width:470px;
}

.container_24 .grid_15 {
	width:590px;
}

Sie können auch extra-Klassen verwenden. Zum Beispiel:

.prefix_1, .prefix_2 usw. – fügen ein Abstand von zwei Spalten vor dem Container ein. (links);

.suffix_1, .suffix_2 usw. – hängen leere Spalten nach dem Container an (rechts );

Mehr Info über Grid960 System finden Sie auf der offizielle Webseite http://960.gs/.