Wenn dieses Tutorial ist nicht genau was Sie suchen und Sie noch Fragen oder Vorschläge haben – lassen Sie uns wissen. Helfen Sie uns bitte um besser zu dienen!

Ihr Name

Emailadresse

Ihre Nachricht (benötigt)

captcha

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.

Hier ist ein Beispiel-Template, das auf einem 24-spaltigen Raster basiert ist:

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/.


  • abc

    thanks.

    No votes yet.
    Please wait...
  • Arvind

    Thanks for provide opportunity………)

    No votes yet.
    Please wait...
 
Live Chat
Consultant
We help you to choose the right product.