Responsives CSS-Grid für Website-Developer

Responsiv | Flexbasiert | Anpassbar

Download
Gridvorschau auf Smartphone
Responsive

Responsiv

hlGrid kommt mit fünf responsiven Breakpoints für Smartphones, Tables, Notebooks, Desktop- und große Desktopscreens.

Flexbasiert

Flexbasiert

Vorteile der Flexbox-Technologie gegenüber floatbasierten Grids sind u. a. identische Spaltenhöhen, vertikale Ausrichtung und responsive Reihenfolge der Spalten.

Anpassbar

Anpassbar

hlGrid wurde in Less entwickelt, daher lassen sich Anzahl und Größe der Breakpoints in Sekunden anpassen.

hlGrid

hlGrid ist ein auf zwölf Spalten basierendes CSS-Grid, mit dem Entwickler schnell und unkompliziert responsive Webseiten erstellen können. Einfach die CSS-Datei im HTML einbinden oder die Less-Dateien ins eigene Skript importieren und schon geht es los.

Das Grid ist in Zeilen und Spalten aufgeteilt. Für jede Spalte kann die genaue Breite bei vordefinierter Auflösungen festgelegt werden.
Genauso kann die Maximalbreite der Inhalte über Containerelemente bestimmt werden.

1/12
11/12
2/12
10/12
3/12
9/12
4/12
8/12
5/12
7/12
6/12
6/12
12/12
Inhalt bestimmt Breite
Nutzt die freie Fläche

hlGrid Syntax

Der für den Einsatz von hlGrid notwendige Code ist einfach und übersichtlich. Über die CSS-Klasse .hl-col-(1-12)[-(s,m,l,xl)] lässt sich mittels Angabe der Spaltenzahl (1-12) die Breite der einzelnen Spalten festlegen.
Der optionale Umbruchpunkt (s,m,l oder xl) bestimmt bei welcher Auflösung diese Spaltenbreite verwendet werden soll. Wird kein Umbruchpunkt angegeben, gilt die Spaltenbreite für alle Auflösungen.

Die Zeilen des Grids werden mit der CSS-Klasse .hl-grid definiert.

<div class="hl-wrapper"> <!-- Bestimmt die Breite des Seiteninhalts -->
    <div class="hl-grid"> <!-- Eine Zeile des Grids -->
        <div class="hl-col-3-xl"><span>3/12</span></div> <!-- Gridspalte 1/4 breit bei Auflösung > 1200px sonst 100% breit -->
        <div class="hl-col-4-xl"><span>4/12</span></div>
        <div class="hl-col-5-xl"><span>5/12</span></div>
    </div>
    <div class="hl-grid">
        <div class="hl-col-3-m hl-col-4-s"><span>3/12 oder 4/12</span></div> <!-- Gridspalte 1/4 breit bei Auflösung > 768px bzw. 1/3 bei Auflösung > 576px -->
        <div class="hl-col-4-s"><span>4/12</span></div>
        <div class="hl-col-5-m hl-col-4-s"><span>5/12 oder 4/12</span></div>
    </div>
</div>

Jetzt starten

Dokumentation Download