Eigene Rasterlayouts ohne Rahmen rollen

Hassen Sie CSS-Grid-Frameworks, aber Sie lieben die schnellen Layoutvorteile, die sie bieten? Haben Sie Schwierigkeiten mit der Mathematik und dem Code, die erforderlich sind, um Ihre eigenen flexiblen mehrspaltigen Layouts zu erstellen?

Heute führen wir Sie durch die Erstellung Ihres eigenen, wiederverwendbaren Basissystems zum Erstellen mehrerer Spalten, die Sie jederzeit mit nur wenigen Codezeilen implementieren können. Kein aufgeblähter Code oder nicht sematische Klassennamen erforderlich!

Grid Frameworks: Vor- und Nachteile

Ich bin ein ziemlich großer Fan von CSS-Grid-Frameworks. Ich liebe es, sie herunterzuladen, aufzubrechen und zu sehen, wie sie ticken. Ich habe über fast jeden guten Artikel geschrieben, den ich hier bei Design Shack finden kann, und ich werde das wahrscheinlich auch in Zukunft tun.

Der Vorteil von Raster-Frameworks ist ein Kinderspiel: Sie sorgen für ein lächerlich schnelles Layout. Wenn Sie ein ziemlich übersichtliches Layout für Ihre Website haben, können Sie es mühelos aus dem Weg räumen und mehr Zeit damit verbringen, Ihr Design zu bereichern, als sich zu bemühen, wie Ihre Spalten funktionieren.

Allerdings haben CSS-Raster-Frameworks auch einige gravierende Nachteile. Für den Anfang sind viele von ihnen recht umfangreich und gehen weit über einfache Layout-Klassen hinaus, während sie versuchen, jedes Standard-HTML-Element, das die Welt je gesehen hat, umfassend zu gestalten, egal wie dunkel diese sind. Dieses Größenproblem kann definitiv dazu führen, dass die Rahmenbedingungen Ihren Verstand schwer einwickeln.

Grid-Frameworks sind auch ziemlich fixiert. Sie müssen sich an ihre Regeln halten, oder Sie brechen die ganze Sache ab. Das Anpassen des Codes nach Ihren Wünschen kann ein langwieriger und schmerzhafter Prozess sein, der die zeitsparende Idee zunichte macht.

Schließlich sind viele Codierer echte Strichmännchen für semantischen Code und das Einrichten generischer, obskurierter Klassen für Layout frustriert sie wirklich zu einem Ende!

Bau dein eigenes

Wie wir gerade gesagt haben, lieben manche Leute CSS-Raster-Frameworks, viele hassen sie absolut. Dieser Artikel richtet sich an die Codierer, die sich irgendwo zwischen den beiden befinden. Sie mögen die Vorteile, die Sie erzielen, wie z. B. die schnelle Anordnung mehrerer Spalten, aber Sie sind nicht überzeugt, dass diese Dinge wirklich die Mühe wert sind.

Dies gilt insbesondere für diejenigen, die eine relativ einfache Webseite erstellen. Sicher, es wäre schön, wenn Sie Hilfe beim Layout hätten, aber einen ganzen Rahmen für eine einzelne Seite einzubringen, ist wie der Einsatz eines Baggers, um einen Schössling zu pflanzen.

Für diese Art von Projekten ist es möglicherweise besser, die Netzstrukturen vollständig aufzugeben. Es kann jedoch immer noch erforderlich sein, über ein System zu verfügen, um mehrere Kolonnen im laufenden Betrieb auszulagern.

Ziel ist es, ein wiederverwendbares System einzurichten, das Sie implementieren können, um komplizierte Layouts mit mehreren Spalten zu erreichen. Das System muss prägnant sein und keinen aufgeblähten Code aufweisen. Es sollte keine große Liste nicht-semantischer Klassen erforderlich sein, von denen viele möglicherweise nie verwendet werden. Es sollte auch flexibel sein und sich bei jedem Projekt nach Ihrem Willen richten, anstatt Sie in eine Ecke zu rücken. Wenn Sie Ihre Meinung ändern und plötzlich die gesamte Breite für die Site ändern, sollte sich unser Raster ohne Probleme neu auflösen. Schließlich sollte die Implementierung schnell und schmerzlos sein.

Spalten in CSS erstellen

Wenn Sie gerade erst mit dem CSS-Layout beginnen, kann das Erstellen eines mehrspaltigen Layouts ein wenig einschüchternd wirken. Wenn es mühelos wäre, hätten wir natürlich nicht so viele Rahmen, die den Prozess vereinfachen möchten!

Angenommen, Sie möchten vier Spalten einrichten. Zuerst müssen Sie Ihre Breite berücksichtigen. Nehmen wir an, Sie haben einen 900px breiten Container. Wenn Sie 900px durch vier Spalten teilen, erhalten Sie 225px pro Spalte. Ziemlich einfach! Diese Säulen werden jedoch alle gegeneinander anstoßen, wir brauchen einige Ränder. Leider werden die Ränder unser Layout sprengen und unsere Spalten über die Stammbreite hinaus erweitern.

Was wir dann tun müssen, ist, den gesamten für Margen benötigten Raum zu ermitteln. Nehmen wir an, wir wollen in der ersten, zweiten und dritten Spalte jeweils eine Rand rechts von drei Pixeln. Drei Pixel mal drei Spalten entsprechen neun Pixeln für Ränder. Jetzt nehmen wir einfach neun von unserer Breite (900 - 9 = 891) und teilen uns dann durch vier Spalten, um 222,75 Pixel für jede der vier Spalten zu erhalten.

Huh

Dies erfordert natürlich ein bisschen Mathematik von unserer Seite. Es ist nicht gerade College-Zeug, aber es macht auch keinen Spaß, dies jedes Mal zu tun, wenn wir ein paar Spalten brauchen (die Mathematik ist auch ziemlich hässlich). Sobald wir die Gesamtbreite unseres Containers ändern, bricht das Ganze ab und wir müssen von vorne beginnen!

Wie schaffen wir es also, wenn die Eltern wechseln, die Kinder folgen?

Verwenden Sie stattdessen Prozente

Pixelwerte sind fallspezifisch und zu präzise, ​​um sie für etwas zu verwenden, das recycelbar sein soll. Wenn wir Prozente ersetzen, wird unsere Berechnung einfacher und unser Raster ist intelligent genug, um sich an einen sich ändernden übergeordneten Container anzupassen. Im Wesentlichen bauen wir ein fließendes Gitter.

Erstellen Sie einen Grid-Rechner

Wenn wir eine schnelle Implementierung wünschen, können wir nicht jedes Mal über diese komplizierte Mathematik nachdenken! Anstatt all diese Zahlen in unseren Köpfen zu speichern, können wir ein Werkzeug einrichten, das die gesamte Arbeit für uns erledigt. Mit einem Tool namens Instacalc ist das ziemlich einfach.

Instacalc ist ein ziemlich schicker Rechner mit einigen kleinen Tabellenkalkulationsfunktionen. Was wir hier bekommen, ist die Möglichkeit, wiederverwendbare Formeln zur Ermittlung unseres Säulensystems aufzustellen. Sie müssen dies nur einmal erledigen, sobald Sie es zum ersten Mal eingerichtet haben, können Sie den Taschenrechner speichern und jederzeit wiederkommen!

Hier ist das Setup, das ich verwendet habe. Im ersten Feld müssen Sie die Anzahl der Spalten eingeben und im zweiten werden Sie nach einem Randwert gefragt (dies wird in Prozent angegeben). Der Rest ist automatisiert, um die Ergebnisse zu erhalten, die Sie benötigen.Das dritte Feld gibt die Gesamtrandbreite an und das vierte Feld gibt die Spaltenbreite an, die Sie benötigen.

Wenn Sie dies nicht einrichten möchten, machen Sie sich keine Mühe! Verwenden Sie einfach meine. Damit können wir einfach die Breiten berechnen, die für das oben ausgeführte Vier-Spalten-Layout erforderlich sind.

Wenn wir jetzt zu einem dreispaltigen Layout wechseln möchten, müssen wir nur noch 3 eingeben. im ersten Feld unseres Rechners. Der Rest wird für uns erledigt. Dies macht die Suche nach mehrspaltigen Layouts überflüssig. Geben Sie einfach eine Zahl für Ihre Spalten und eine Zahl für Ihren Rand ein und Sie erhalten alles, was Sie brauchen. Manchmal erhalten Sie einige schlampige Zahlen, aber ehrlich gesagt habe ich festgestellt, dass es absolut kein Problem ist, die Spaltenbreite auf 30,667% einzustellen.

Baue es!

Genug Theorie, lasst uns diesen Trottel bauen. All das oben genannte Zeug klingt nach einer Menge Arbeit, aber ehrlich gesagt ist es viel mehr Arbeit, es zu erklären als zu bauen!

Angenommen, wir möchten vier Textspalten, die vier Funktionen auf unserer Website erläutern. Der HTML-Code dafür ist ziemlich einfach. Erstellen Sie einfach einen Wrapper für den gesamten Abschnitt und ein Div für jede Spalte. Ich warf auch einen? Letzten? Klasse in der letzten Spalte, um uns den Rand zu erleichtern.

Nun zum CSS. Zuerst legen wir eine Breite für den Wrapper und die Breite fest Überlauf zu versteckt. Als Nächstes gestalten wir die Features-Klasse einfach mit der Mathematik, die unser Taschenrechner ausgibt. Es ist wichtig anzumerken, dass wir, da wir diesen Rechner bereits eingerichtet haben, keine einzige Berechnung in unseren Köpfen durchführen müssen. Geben Sie einfach die Werte ein und nehmen Sie heraus, was der Rechner uns gibt.

Sehen Sie, wie wenig Code das ist. Anstelle eines gigantischen Rahmens haben wir einige einfache Erklärungen, die jeder lesen kann. Das Ergebnis ist ein hübsches kleines vierspaltiges Layout, das sich perfekt an jedes Szenario anpasst.

Von hier aus können wir unsere Breite beliebig ändern und das Raster wird sich selbst fixieren. Möchten Sie zu 960px weit wechseln? Ändern Sie einfach die Breite des Wrappers.

Wenn Sie ein schönes flüssiges Gitter wünschen, ändern Sie die Breite des Wrappers in Prozent. Wenn Sie nun die Browsergröße anpassen, werden Ihre Spalten automatisch angepasst.

Spalten kombinieren

Die Klugen unter euch sagen schon "nicht so schnell". Das Problem, auf das wir hier gestoßen sind, ist, dass alle Spalten die gleiche Breite haben müssen. Was ist beispielsweise, wenn wir die letzten beiden Spalten unseres Layouts in einer breiten Spalte kombinieren möchten?

Dazu müssen wir in Instacalc eine Formel einrichten, die zwei Spalten kombiniert und den Rand einer davon wegnimmt. Wie der Rest ist dies eine einmalige Sache, die Sie immer wieder verwenden können. Hier habe ich eine Formel für die Kombination von zwei Spalten und eine für die Kombination von drei erstellt.

Der Code

Der HTML-Code ist genau wie beim letzten Mal, nur wir haben drei statt vier Spalten.

Wieder stecken wir einfach die Zahlen aus unserem Taschenrechner und wir erhalten ein nettes, prägnantes Stück CSS, das genau das schafft, was wir brauchen.

Hier ist das Layout mit der letzten Spalte, die doppelt so breit ist wie die ersten beiden. Mit dieser Methode können Sie eine endlose Kombination unterschiedlicher Breiten aufteilen, die Sie auf alle verschiedenen Bereiche Ihrer Site anwenden können.

Spiel damit

Ich möchte Sie auf jeden Fall dazu ermutigen, in diesen Code zu springen und sich die Hände schmutzig zu machen. Ich habe bei JSFiddle einen Live-Spielplatz eingerichtet, damit Sie diese Beispiele live sehen und nach Ihren Wünschen bearbeiten können.

Klicken Sie hier, um die Demo zu starten

Fazit

Zu Beginn des Projekts hatten wir verschiedene Ziele. Wir haben uns zum Ziel gesetzt, ein einfaches Rastersystem zu erstellen, das flexibel genug ist, um in einem Container beliebiger Breite implementiert zu werden, selbst wenn der Container seine Größe ändert. Das CSS musste extrem kurz sein und eine semantische Klassenname ermöglichen. Schließlich musste die Umsetzung schnell erfolgen.

Obwohl es auf jeden Fall ein bisschen kompliziert ist, Ihren Kopf zuerst zu umwickeln, erreicht unser System alle diese Ziele. Sie mögen argumentieren, dass es viel zu viel Mathematik ist, um es einfach zu nennen, aber in Wahrheit habe ich Ihnen die Formeln und den gespeicherten Rechner gegeben, den Sie benötigen. Sie müssen lediglich zwei Zahlen eingeben, wenn Sie ein neues Layout erstellen möchten.

Dieser Artikel ist keinesfalls eine Empfehlung, dass Sie dieses System immer verwenden sollten, um mehrspaltige Layouts zu erstellen. Es ist nur ein Versuch, Ihnen zu zeigen, dass Sie nicht auf den komplizierten und aufgeblähten Rahmen einer anderen Person angewiesen sein müssen. Mit ein wenig Setup und Einfallsreichtum können mehrspaltige Layouts nach Bedarf mit sehr geringem Aufwand erstellt werden!