Top 21 HTML5/CSS3-Grid-Systeme und Frameworks

Traditionelle Designmethoden bedeuteten noch vor wenigen Jahren, dass man eine Homepage ganz alleine gestalten musste, Wireframes und Contentboxen zusammenfügen und dann auf das Beste hoffen mussten, aber nach und nach ist diese Technik verschwunden und neue, modernere Methoden der schnellen Website-Entwicklung entstanden sind. CSS3 hat vor allem Flex-Box eingeführt – eine einfach zu verwendende Rasterfunktion, mit der Sie Inhaltslayouts erstellen können, aber dennoch – einige sind resistent, während andere für absolute Designpräzision noch kompliziertere Ansätze verfolgen.

Wenn Sie eine neue Website öffnen, sehen Sie normalerweise den Kopfbereich der Website, den Inhaltsbereich und eine Seitenleiste – diese Hauptbereiche enthalten auch ihre eigenen Design-Layouts und Spezifikationen, und das Kaninchenloch wird immer tiefer. Es ist entscheidend, einen Weg zu finden, ein Homepage-Layout (oder eine andere Seite) zu gestalten, das auf allen Medien, Geräten und Software gut aussieht. Daher dachten wir, dass es für unsere Entwicklerkollegen nützlich sein könnte, eine Sammlung von CSS- und HTML-Frameworks und -Systemen für die Entwicklung von Grid-Layouts zusammenzustellen.

Möchten Sie mehr Rahmen? Probieren Sie unsere anderen Zusammenfassungen aus:

• JavaScript-Frameworks
• HTML5-Frameworks
• CSS3-Frameworks
• Node.js-Frameworks

Unnötig zu erwähnen, dass diese Designs an jede Situation angepasst werden können, sodass Sie sich die Kopfschmerzen ersparen können, Knicke und Macken des Design-Layouts selbst ausarbeiten zu müssen, und sich stattdessen darauf konzentrieren, diese Rasterfelder mit den gewünschten Inhalten zu erfüllen dorthin zu legen. Es gibt eine große Vielfalt und verschiedene Stile, die Sie in diesen Rastersystemen finden. Nehmen Sie sich etwas Zeit, um die Demoseiten zu besuchen und schreiben Sie vielleicht sogar auf, wonach Sie suchen, damit Sie das passende Framework leichter finden können für Ihre Bedürfnisse.

Totes einfaches Gitter

Grids sollten nie kompliziert sein, im eigentlichen Sinne sind sie nur HTML-Elemente, die ein Gesamtdesign zusammensetzen, und Vladimir Agafonkin ist einer der Entwickler, die dieses Konzept annehmen. Sein Grid-Framework Dead Simple Grid umfasst nur zweihundert Bytes CSS-Code; Das ist so wenig Code, dass Ihre Seiten nicht einmal bemerken, dass er da ist. Sie können das Raster trennen, um einen Hauptinhaltsbereich und eine flexible Seitenleiste zu bieten, wenn Sie dies wünschen. Diese Art von Raster eignet sich für Blogs und allgemeine Homepage-Layouts, bei denen minimales Design bevorzugt wird. Dank Medienabfragen ist ein responsives Design integriert, sodass das Raster auf jedem Gerät, auf dem es verwendet wird, einwandfrei aussieht.

Bourbon Ordentlich

Bourbon ist eine sehr erfolgreiche Bibliothek von Mixins für den SASS-Präprozessor. Dies hat Neat natürlich zu einer attraktiven Wahl für diejenigen gemacht, die bereits Bourbon und SASS verwenden. Neat bietet Entwicklern Zugriff auf ein flüssiges Rastersystem, das schnell und einfach in wenigen Minuten eingerichtet werden kann, aber so flexibel ist, dass unbegrenzte Änderungen und Anpassungen kein Problem darstellen.

Grd

Grd ist ein CSS-Rastersystem, das Flexbox als Backend-Tool zum Erstellen flexibler und moderner responsiver Layouts verwendet. Mit der Live-Demo können Sie mit den Einstellungen und verschiedenen Designanpassungen spielen, um zu sehen, ob Grd Ihr Problem lösen kann, ein bestimmtes Designelement in Ihren bestehenden Workflow zu integrieren. Wir fanden es einfach, Kopfzeilen, Fußzeilen und allgemeine Inhaltsbereiche mit nur einer Dropdown-Liste von Einstellungen zu erstellen.

STRUKTUR

Struktur, die ebenfalls auf Flexbox basiert, verwendet deklarative Syntaxmuster (ähnlich denen in Angular.js), um Abschnitte und Layoutparameter zu definieren. Einige Entwickler haben sich darüber beschwert, dass das endgültige Markup der Seite nicht validiert werden kann, aber die Idee ist, dass Sie mit Structure ein deklaratives Raster erstellen können, das sich nicht mit traditionellen CSS-Attributen wie Klassen und Identifikationsnamen auseinandersetzt.

960 Gittersystem

Hunderttausende von Websites haben das 960 Grid-System von Nathan Smith verwendet, um ihr Design-Layout zu unterstützen. Es ist ein effizientes Tool zur Optimierung des Workflows von hart arbeitenden Webentwicklern. Durch die Wahl von zwei verschiedenen Spaltenlayouts (12 bzw. 16) können Entwickler schnell eine Homepage erstellen, die jede Art von dynamischer und statischer Eingabe unterstützt. Es ist möglich, weitere Spalten hinzuzufügen, aber Sie müssen mit der Dokumentation arbeiten, um die Verwendung klarer zu verstehen.

Unsemantisch

Unsemantic ist die Nachfolgeversion des 960-Rasters, die vollständige Responsive-Design-Funktionen bietet. Durch einzigartige Pull-Klassen können Entwickler das Layout der von ihnen erstellten Seite neu anordnen, was dazu beitragen kann, die wichtigsten Inhalte zu jeder Zeit zu bewerben und zu präsentieren. Eine bekannte Strategie, die Suchmaschinen hilft, den Zweck jedes Inhaltselements besser zu verstehen. Unsemantic ist auch ein stolzer Benutzer von Media Queries, sodass etablierte Front-End-Entwickler keine Schwierigkeiten haben werden, dieses Grid-Framework an ihre eigenen Bedürfnisse anzupassen.

Einfaches Raster

Daher ist der Name Simple Grid für alle gedacht, die Einfachheit und Benutzerfreundlichkeit suchen. Das Layout ist responsive, kompatibel mit Smartphones, Tablets und Desktop-Computern. Mit anderen Worten, die Leistung Ihres Projekts wird ohne Zweifel erstklassig sein. Es ist auch voll und ganz auf große Bildschirme und höhere Auflösungen abgestimmt. Außerdem ist Simple Grid nur ein Raster ohne zusätzliche Assets, was es sehr leicht macht. Mit der komfortablen zwölfspaltigen Struktur haben Sie die Freiheit, das Layout ganz nach Ihren Wünschen zu gestalten. Sie können es problemlos in zwei, drei, vier oder sechs Spalten unterteilen.

csswizardry-grids

Mit einem HTML-Grid, wie csswizardry-grids, können Sie Zeit und Energie sparen. Es ist ein robustes Werkzeug, das Sie nach Herzenslust präzise einsetzen können. Es ist sehr benutzerfreundlich und leicht strukturiert, um sicherzustellen, dass Webentwickler aller Ebenen das Beste daraus machen. Auf dem obigen Screenshot können Sie einen Blick auf all die verschiedenen Variationen werfen, die csswizardry-grids unterstützt. Sie können die Dinge frei neu anordnen, so dass es Ihren Wünschen entspricht. Machen Sie Ihre Aktivität, indem Sie es jetzt vermeiden, Dinge von Grund auf mit csswizardry-grids auszuführen, und beginnen Sie auf dem richtigen Fuß.

Tiefgründiges Gitter

Die Freiheit, die Ihnen Profound Grid bietet, geht weit darüber hinaus. Dieses flexible und erweiterbare Rastersystem können Sie sowohl für feste als auch für fließende Layouts einsetzen. Das Ergebnis wird auf allen modernen Geräten reibungslos funktionieren. Sie können genau die gewünschte Struktur erstellen, indem Sie Spalten nach Belieben ändern, entfernen oder hinzufügen. Sie können sich zunächst einige Beispiele ansehen, um zu sehen, was mit Profound Grid möglich ist. Darüber hinaus garantiert Profound Grid mit den negativen Rändern bei der Berechnung von Spalten, dass flüssige Layouts unabhängig von Bildschirmgröße und Webbrowser gleich aussehen.

Bratpfanne

Die Vorteile eines Grid-Systems sind enorm, denn Sie sparen nicht nur Zeit, sondern müssen sich auch nicht um technische Details kümmern. Griddle gewährleistet beispielsweise die vollständige Kompatibilität mit gängigen Geräten und Webbrowsern. Das heißt, die Performance Ihrer Anwendung ist jederzeit erstklassig. Mit Griddle können Sie alles verwirklichen, von proportionalen und verschachtelten Gittern bis hin zu zentrierten und hybriden Einheiten. Bei letzterem können Sie mit einigen Anpassungen feste und flüssige Einheiten in einem beeindruckenden Build kombinieren. Sie haben die Kontrolle über die horizontale Zentrierung der Einheiten und können sogar die vertikale Ausrichtung ändern.

CSS Smart Grid

CSS Smart Grid folgt den neuesten Trends und Vorschriften, um die Kompatibilität mit verschiedenen Geräten zu gewährleisten. Kurz gesagt, das Tool ist leicht, reaktionsschnell und mobil, damit Sie damit epische Dinge erstellen können. Ob mit einem Smartphone oder einem großen Desktop-Bildschirm, CSS Smart Grid sorgt dafür, dass das Layout auf beiden reibungslos funktioniert. Zu Ihrer Information, selbst wenn jemand ein Feature-Phone verwendet, um im Internet zu surfen, funktioniert Ihr auf CSS Smart Grid basierendes Projekt genauso gut – mit einer einzigen Spaltenansicht. Auf der offiziellen Website finden Sie auch eine kurze Anleitung, sodass Sie bei der Verwendung des Tools keine Probleme haben.

Gridlex

Gridlex zeichnet sich durch sein herausragendes Design und seine Benutzerfreundlichkeit aus. Die Einfachheit dieses auf Flexbox basierenden Raster-Frameworks ist erstaunlich, die Vision ist einfach – wickeln Sie Ihre Spalten in Ihr Raster ein und nehmen Sie bei Bedarf zusätzliche Anpassungen vor, um Ihr endgültiges Design unwiderstehlich aussehen zu lassen. Wenn Sie sich nur die Demos von Websites ansehen, die Gridlex verwenden, wird deutlich, dass dies ein erstklassiges Rastersystem ist, und Sie werden nicht enttäuscht sein, was es für Ihre eigenen Projekte und Ihren Arbeitsablauf tun kann.

Responsive Grid-System

Responsive Grid System hat einiges zu bieten, den perfekten Domainnamen, eine klare Vision und die erforderlichen Tools, um responsives Grid-Design zum Kinderspiel zu machen! Der Grid-Generator bietet eine einfache Formulareingabe, in der Sie die Anzahl der Spalten angeben können, die Sie verwenden möchten, und den Abstand, den Sie zwischen ihnen sehen möchten. Klicken Sie auf "Senden" und Sie erhalten eine einsatzbereite Codeausgabe Ihres nächsten responsiven Rasterlayouts. Der Autor, Graham, übernimmt gerne die ganze harte Arbeit für Sie, wenn Sie dies wünschen. Sie können ihn in der Fußzeile der Seite kontaktieren.

Gridly

Die Entwickler haben Gridly als minimales Grid-Layout-System entwickelt, um die modernsten Browser von heute zu unterstützen. Seine leichte Struktur hilft Entwicklern, ein Raster-/Spalten-Layout ohne großen Aufwand zum Laufen zu bringen. Insgesamt macht die absurd minimale Größe dieser Bibliothek Lust auf mehr für kommende Projekte.

Formstein

Formstone ist kein einzelnes verwaltetes Grid-System, sondern eine Bibliothek für Front-End-Entwickler, die hochgradig anpassbare Komponenten und Webelemente benötigen, aus denen eine herkömmliche Webseite besteht, der Sie täglich begegnen. Als modulare, reaktionsschnelle und automatisierte Bibliothek kann Formstone nicht nur für die Skalierung eines großen Website-Projekts verwendet werden, sondern auch für die Verwendung des Rasterlayouts selbst.

Bootstrap

Wo wäre Bootstrap heute ohne sein Grid-System, auf dem alles andere aufgebaut ist? Wir warten immer noch sehnsüchtig auf die Ankunft von Bootstrap 4, aber in der Zwischenzeit können Sie nicht widerstehen, einem Framework zuzustimmen, das es geschafft hat, sich als eines der prominentesten Front-End-Frameworks dieses Jahrhunderts zu etablieren. Millionen von Websites werden von den Funktionen von Bootstrap unterstützt, aber nichts davon wäre möglich, wenn nicht das Grid-Framework in den Kern von Bootstrap integriert wäre.

Stiftung

Foundation ist eine weitere erfolgreiche Frontend-Bibliothek, die responsives Design unterstützt. Die neueste Version (Foundation 6) bringt noch modernere Funktionen und Elemente auf den Tisch, die Entwicklern helfen können, ihren Kunden unglaublich vielseitige Designs bereitzustellen. Die einfach zu verwendenden Vorlagen von Foundation geben Ihnen die Möglichkeit, sich von all dieser Grid-Entwicklung zu erholen und sich stattdessen auf das Wesentliche zu konzentrieren – die Dinge, die Sie in dieses Grid selbst einfügen werden.

Skelett

Skeleton hat ein schönes und natürliches Design, das Lust auf mehr macht. Die Macher haben die Idee hinter Skeleton entwickelt, um die beste Wahl für kleine Projekte zu sein. Sie können es auch in Projekten verwenden, bei denen Sie der Meinung sind, dass die Verwendung eines vollwertigen Frameworks nicht angemessen wäre. Skeleton bietet Ihnen das Wesentliche, das Sie benötigen, um einen Website-Prototyp zum Laufen zu bringen; ein Rasterlayout, Typografieoptionen für Überschriften und Abschnitte, Schaltflächenelemente für alle Ihre Formularanforderungen und sogar benutzerdefinierte Formulare, damit Sie Zeit für das eigene Codieren sparen, eine nette Ergänzung von Listen, Tabellen und Codesyntax sowie ein Medien Abfrage-Framework, damit Ihre Designs vollständig responsiv werden!

Responsive Grid-System 2

Responsive Grid System (Version 2) ist ein Mobile-First-Grid-System, das superklein und dennoch hocheffektiv im Stil ist. Sie können aus einer Reihe von Spaltenlayouts wählen (24, 16, 12). Sie können auch die Ränder und Abstände zwischen den Spalten anpassen und Polyfills verwenden, um ein herausragendes Design-Layout zu erstellen.

Responsive Grid-System für Ihr nächstes Projekt

Das responsive Grid-System für Ihr nächstes Projekt verwendet dieselben Klassen wie das 960-Grid-System. Es wurde entwickelt, um in erster Linie mobile Besucher zu bedienen, und bietet eine Boilerplate für die Kopfzeilenverwaltung. Die Entwickler haben es mit allen modernen Browsern getestet, so dass Sie in guten Händen sind. Sie können dies als Basisrastersystem verwenden, das Ihnen hilft, ein responsives Webdesign zu erstellen. Dadurch werden Ihre vorhandenen Kenntnisse über das beliebte Rastersystem beibehalten.

HTML5-Boilerplate

HTML5 Boilerplate ist ein robustes Boilerplate-Framework (Template) für Frontend-Entwickler. Es ist für Entwickler gedacht, die ihr Projekt ohne den Ärger mit größeren Frameworks wie Bootstrap oder Foundation starten möchten.