Erstellen von Webformular-Layouts mit CSS-Grid

In diesem Lernprogramm erfahren Sie, wie Sie mithilfe von CSS Grid verschiedene Webformulare erstellen. Für jedes Beispiel werden wir zuerst Floats verwenden und dann sehen, wie das gleiche Layout mit CSS Grid erstellt werden kann.

Wenn Sie noch keine Kenntnisse des CSS-Rasters haben, werfen Sie einen Blick auf unsere Einsteigerserie "Das CSS-Rasterlayout-Modul". Lass uns anfangen!

1. Grundlegendes Anmeldeformular

In diesem Layout teilen wir das Formular in zwei Spalten auf, sodass wir links die Beschriftungen und rechts die Eingabefelder anzeigen können. 

Mit "traditionellem" CSS

Ein traditioneller Ansatz für dieses Layout könnte Floats verwenden, um uns unsere Spalten zu geben. Beachten Sie, dass wir keinen Wrapper für das Formularelement haben. Wir werden die Beschriftungen und Eingaben direkt gestalten.

 Vorname  Nachname   

form overflow: versteckt;  label float: left; Breite: 200px; Polsterung rechts: 24px;  input float: left; Breite: berechnet (100% - 200px);  button float: right; Breite: berechnet (100% - 200px); 

Sie werden feststellen, dass wir verwenden calc () Hier können wir unsere linke Säule auf 200px Breite fixieren, während die rechte Säule flüssig bleibt.

Hier ist das Ergebnis mit einigen zusätzlichen Stilen für die Ästhetik:

Mit CSS-Rasterlayout

Unser Ziel bei der Verwendung von „Grid“ ist es, zwei Spalten zu definieren und jedes Element in der erforderlichen Spalte zu platzieren.

Der erste Schritt ist das Definieren unseres Gitters für das übergeordnete Element bilden:

form display: grid; 

Dann müssen wir dieses Raster mit teilen Raster-Vorlage-Spalten:

form display: grid; Rastervorlagen-Spalten: 200px 1fr; 

Basierend auf dem obigen CSS hat die erste Spalte eine feste Breite von 200px während der zweite dauert 1fr („Ein Bruchteil“) des verbleibenden verfügbaren Platzes.

Nun müssen wir die Platzierung für unsere Labels und Eingaben definieren. Um dies zu tun, werden wir verwenden Rasterspalte mit spezifischen Werten für die Gitterlinien:

Weitere Informationen zur Funktionsweise von Rasterlinien finden Sie in diesem kurzen Tipp:

• 

  Schneller Tipp: Benennen Sie Ihre CSS-Rasterlinien, nur für den Fall

  In jedem CSS-Grid hat jede Zeile eine Indexnummer, auf die wir uns beziehen können, um Gitterelemente zu platzieren. Wir können jedoch auch jede dieser Gitternetzlinien benennen.

Basierend auf diesen Rasterlinien wenden wir die folgenden Regeln für unsere Beschriftungen, Eingaben und die Schaltfläche an:

Beschriftung Gitterspalte: 1/2;  Eingabe, Schaltfläche Gitterspalte: 2/3; 

Die Beschriftungen befinden sich in der Spalte, die in Zeile 1 beginnt und in Zeile 2 endet. Die Eingaben und die Schaltfläche werden in die Spalte eingefügt, die in Zeile 2 beginnt und in Zeile 3 endet.

Zum Schluss verwenden wir Netzlücke So fügen Sie zwischen den Zeilen und Spalten eine Rinne mit 16 Pixeln hinzu:

form display: grid; Rastervorlagen-Spalten: 200px 1fr; Gitterlücke: 16px; 

2. Kontaktformular

In diesem Layout möchten wir Folgendes erreichen:

1. Die Spaltenhöhe sollte gleich sein, daher haben die Seitenleiste und der Formularumbruch die gleiche Höhe.
2. Wir möchten das Formular (die rechte Seite) weiter in zwei Spalten unterteilen und die Schaltfläche so ändern, dass sie die gesamte Breite ausfüllt.

Es ist durchaus möglich, dieses Layout mit Schwimmern zu erstellen. Wir müssen jedoch a einstellen min-Höhe für die linke Spalte, sonst nimmt sie nicht die volle Höhe an. Es gibt andere "traditionelle" Ansätze für dieses Problem, aber keiner ist besonders hübsch.

Mit "traditionellem" CSS

Zusammenfassend müssen wir bei Schwimmern Folgendes tun:

1. Hinzufügen min-Höhe in der linken Spalte.
2. Schweben Sie die Kontakt- und Formularumhüllungen.
3. Füge ein clearfix hinzu oder Überlauf versteckt; um die Umschlaghöhe zu erhalten.
4. Verschieben Sie die Formularelemente und fügen Sie Ränder zwischen ihnen hinzu.
5. Setzen Sie Floating für das zurück Textbereich und senden Sie die Schaltfläche und lassen Sie sie die volle Breite ausfüllen.

Das ist ziemlich viel Arbeit, richtig?

Ein besserer Ansatz wäre, dies entweder mit Flexbox oder Grid zu lösen. In diesem speziellen Fall würde ich lieber Grid verwenden, da wir Elemente horizontal und vertikal anordnen.

Mit CSS-Rasterlayout

Beginnen wir damit, ein Raster auf unserem Wrapper zu deklarieren und es in zwei Spalten zu unterteilen.

.Wrapper Anzeige: Gitter; Rastervorlagen-Spalten: 1fr 2fr; 

Unser Formelement ebenfalls muss ein Gitter deklariert werden:

form display: grid; Rastervorlagen-Spalten: 1fr 1fr; Gitterlücke: 20px; 

Nachdem Sie die obigen Regeln angewendet haben, erhalten Sie Folgendes:

Die letzten beiden Elemente müssen die volle Breite ausfüllen, indem wir sie von der Rasterlinie 1 bis zur Rasterlinie 3 strecken.

.volle Breite Gitterspalte: 1/3; 

3. Profilformular

Zeit für unser letztes Formularlayout. In diesem Beispiel haben wir eine Eingabe für Benutzer eingefügt, um ihr Profilfoto hochzuladen. Es sollte oben rechts platziert werden.

Mit "traditionellem" CSS

Wir werden dies mit dem folgenden Markup erstellen:

 
 Dein Name  
 
 Email  
 
 Dein Foto hochladen  
 
 sparen 
 

Kurz auf einen traditionellen Ansatz eingehen, können wir unser Layout mit diesen Schritten erreichen:

1. Hinzufügen Position: relativ; zum Formularelement.
2. Positionieren Sie die Dateieingabe absolut rechts oben. 
3. Fügen Sie dem Formular einen Abstand hinzu, der die gleiche Breite hat wie die Dateieingabe.
4. Geben Sie eine feste Breite für die Dateieingabe an.

Mit CSS-Rasterlayout

Lassen Sie uns nicht zu sehr auf den traditionellen Ansatz eingehen. Mit Raster teilen wir das Formular wie folgt in zwei Spalten:

Die erste Spalte nimmt den doppelten horizontalen Platz der zweiten Spalte ein, was wir erreichen werden fr Einheiten:

form display: grid; Rastervorlagen-Spalten: 2fr 1fr; Gitterlücke: 20px; 

Nachdem wir das Gitter erstellt haben, müssen wir die Formularelemente zwischen der Rasterlinie 1 und der Rasterlinie 2 platzieren:

form p Gitterspalte: 1/2; 

Der nächste Schritt ist das Platzieren der Eingabedatei in der zweiten Spalte. Um dies zu tun, werden wir es zwischen Rasterlinie 2 und Rasterlinie 3 platzieren. Wenn Sie sich vertikal bewegen, werden Zeilen von Rasterlinie 1 bis Rasterlinie 2 überspannt.

.Eingabedatei-Wrapper grid-column: 2/3; Rasterreihe: 1/2; 

Fazit

Gut gemacht! Wir haben verschiedene Beispiele für die Verwendung von CSS-Grids beim Erstellen von Webformularen behandelt. Wie Sie bemerkt haben, haben wir viel Zeit und Mühe gespart, indem Sie einige Zeilen Code geschrieben haben, anstatt traditionelle Layouttechniken zu verwenden. Dank CSS können Sie alle oben genannten Beispiele ab heute verwenden @supports die uns helfen, eine bestimmte Funktion als Erweiterung zu nutzen. 

• 

  Schneller Tipp: Fügen Sie Ihren CodePen-Demos eine @supports-CSS-Datei hinzu

  Wenn Ihre CodePen-Demos auf modernste CSS angewiesen sind, sollten Sie die Leute warnen. Lassen Sie uns eine Benachrichtigung bereitstellen, wenn Browser unsere Demos nicht unterstützen.

Haben Sie Vorschläge zur Verbesserung dieser Layouts? Lass es mich in den Kommentaren wissen!