Grid.css - Ein minimales Rastersystem für Webentwickler

Größere Frontend-Frameworks wie Bootstrap werden mitgeliefert eigene Netzaufbauten. Aber sie auch kommt mit viel Gepäck in Form von vordefinierten Seitenelementen und JavaScript-Komponenten.

Wenn Sie nach einem viel kleineren und stromlinienförmigeren Rastersystem suchen, werden Sie begeistert sein Grid.css.

Diese kostenlose Open-Source-Bibliothek ist im traditionellen Lieferumfang enthalten 12-Col-Rastersystem dass Sie für jedes Layout strukturieren können. Das CSS ist sehr einfach zu bedienen und die Datei selbst misst nur 560 bytes (das ist eine halbe KB!)

Der Einstieg ist super einfach und Sie brauchen nur eine CSS-Datei zu Ihrem Header hinzugefügt.

Sie können das finden Direkter Download-Link auf der Grid.css-Homepage oder im offiziellen GitHub-Repo. Sie könnten sogar die verwenden unformatierte CDN-Version um diese Datei direkt aus GitHub einzubetten, ohne sie selbst zu hosten.

Nun können Sie Ihre Spaltenstruktur einrichten Verwenden Sie beliebige Elemente (divs, abschnitte usw.).

Dies beinhaltet im Allgemeinen a .Reihe Element (der Container) zusammen mit vielen interne Spaltenelemente. Die Spaltenklassen Verwenden Sie Zahlen um ihren gesamten Platz innerhalb des Containers zu definieren, so zum Beispiel, .col4 nimmt vier Spalten der insgesamt zwölf auf.

Hier ist ein Beispielausschnitt von der Demo:

Sie können eine beliebige Kombination von Spaltenklassen verwenden, solange Sie möchten addiere bis zu 12.

Das heißt du kannst es auch strukturieren Sie die Seite neu wie Sie möchten, indem Sie verwenden verschiedene Reihencontainer. Beispielsweise könnten Sie einen großen Bereich für die Kopfzeile haben, aber zwei unterschiedliche Zeilen- / Spalten-Einstellungen für den Seitentext verwenden.

Natürlich ist diese Bibliothek 100% kostenlos und Open Source, Sie können also nach Belieben Änderungen vornehmen.

Der Schöpfer Ahmed Tarek, machte auch Butns Dies ist eine Variante der vielen Button-UI-Kits. Es passt gut zu Grid.css, Sie sind also beide ausgezeichnete Bibliotheken, die beim Starten eines neuen Webprojekts zur Verfügung stehen.