Ein CSS-Raster-Rätsel: Auffüllen von Rasterelementen ⇐ CSS

[Anonymous]

Okay, also habe ich mithilfe von CSS-Rastern ein hübsches E-Mail-Formular erstellt. Alles ist in Ordnung und gut, außer wenn ich versuche, etwas Polsterung auf die Formularelemente anzuwenden. Dann beginnen die Dinge aus dem Raster herauszufließen.

Es scheint, als würde das Rastersystem den Abstand innerhalb der Elemente nicht berücksichtigen, wenn es die endgültige Größe der Rasterelemente berechnet. Ich habe versucht, fr-s und auto für die Breite dieser Elemente und alle möglichen nutzlosen Hacks zu verwenden, aber nichts funktioniert wirklich.

Hier ist der Code und einige Screenshots, damit Sie alle meinen Schmerz spüren können.

Ohne Auffüllung in den Eingabefeldern:
https://i.sstatic.net/L9uy1.jpg und
https://i.sstatic.net/dQCFm.jpg

Mit Auffüllung:
https://i.sstatic.net/xBeDo.jpg und
https://i.sstatic.net/1dk1l.jpg

Code: Select all

Name


Email Address


Message


Send it

Und das CSS:

Code: Select all

#email {
display: grid;
grid-gap: 2rem;
grid-template-areas:
"name address"
"message message"
"send send";
grid-template-columns: 1fr 1fr;
justify-items: start;
margin: 1rem auto 0 auto;
width: 80%;
}

#form-name {
grid-area: name;
}

#form-address {
grid-area: address;
}

#form-message {
grid-area: message;
}

.form-group * {
display: block;
}

#form-name, #form-address, #form-message {
width: 100%;
}

#name-field, #address-field, #message-field {
width: 100%;
}

#name-field, #address-field, #message-field {
padding: 0.75rem 1.5rem;
}