So erstellen Sie ein einfaches Formular mit CSS Grid

Sie haben im vorherigen Artikel gelernt, ein einfaches Formular mit Flexbox zu erstellen. Heute werden Sie verstehen, wie Sie mit CSS Grid dasselbe erstellen.

Folgendes bauen wir:

Erstellen des Formulars mit CSS Grid

Aus dem obigen Bild wissen wir, dass das Formular zwei Elemente enthält:

  1. Ein E-Mail-Feld
  2. Ein Submit-Button

Hier ist der HTML-Code:

  Send 

Um das Formular mit CSS Grid zu erstellen, müssen Sie die displayEigenschaft des übergeordneten Elements auf festlegen grid.

form { display: grid; }

Folgendes erhalten Sie:

Warum haben wir zwei Reihen bekommen?

Wir erhalten zwei Zeilen, weil wir die Anzahl der Spalten für das Raster nicht angegeben haben. Browser verwenden immer standardmäßig eine Spalte.

Für dieses Formular müssen zwei Spalten festgelegt werden.

  1. Die erste Spalte sollte erweitert werden, um den verfügbaren Speicherplatz auszufüllen
  2. Die zweite Spalte sollte entsprechend ihrem Inhalt dimensioniert sein

Für die erste Spalte können wir die frEinheit verwenden. Für die zweite Spalte können wir verwenden auto.

form { display: grid; grid-template-columns: 1fr auto; }

Damit haben Sie das Layout des Formulars abgeschlossen. Hier ist ein Codepen, mit dem Sie herumspielen können:

Einfaches Formular mit CSS Grid von Zell Liew (@zellwk) auf CodePen.

Wenn Elemente ungleich hoch sind

Wir werden Elemente ungleicher Höhe simulieren, indem wir den buttonText des Textes durch ein SVG ersetzen . Dies ist das gleiche wie im vorherigen Artikel.

Beachten Sie, dass sich die inputHöhe erhöht, um auch dem großen SVG-Symbol zu entsprechen! Auch hier müssen wir keinen zusätzlichen Code schreiben. Dies liegt daran, dass Rasterelemente vertikal gestreckt werden, um den verfügbaren Platz auszufüllen.

Wenn Sie dieses Verhalten ändern möchten, können Sie das ändern align-itemsEigenschaft entweder start, endoder center.

Hier ist ein Codepen, mit dem Sie herumspielen können:

Einfaches Formular mit CSS Grid (mit SVG Button) von Zell Liew (@zellwk) auf CodePen.

Einpacken

CSS Grid erleichtert das Erstellen von Layouts. Es muss nicht für Makro-Layouts verwendet werden. Es kann auch für Mikrolayouts wie das hier gezeigte Formularbeispiel verwendet werden.

Viel Spaß mit CSS Grid!

Danke fürs Lesen. Hat Ihnen dieser Artikel in irgendeiner Weise geholfen? Wenn Sie dies getan haben, hoffe ich, dass Sie darüber nachdenken, es zu teilen. Sie könnten jemandem helfen. Vielen Dank!

Dieser Artikel wurde ursprünglich in meinem Blog veröffentlicht.

Melden Sie sich für meinen Newsletter an, wenn Sie mehr Artikel wünschen, um ein besserer Front-End-Entwickler zu werden.