Тайна CSS-сетки: заполнение элементов сетки ⇐ Html

[Anonymous]

Хорошо, я создал красивую форму для отправки электронного письма, используя CSS-сетки. Все в порядке, за исключением случаев, когда я пытаюсь применить некоторые отступы к элементам формы. Затем элементы начинают вытекать из сетки.

Похоже, что система сетки не учитывает отступы внутри элементов при вычислении окончательного размера элементов сетки. Я пробовал использовать fr-s и auto для изменения ширины этих элементов, а также всевозможные бесполезные приемы, но ничего не помогает.

Вот код и несколько снимков экрана, которые помогут вам почувствовать мою боль.

Без заполнения в полях ввода:
https://i.sstatic.net/L9uy1.jpg и
https://i.sstatic.net/dQCFm.jpg

С заполнением:
https://i.sstatic.net/xBeDo.jpg и
https://i.sstatic.net/1dk1l.jpg



Name


Email Address


Message


Send it




И CSS:

#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;
}


Подробнее здесь: https://stackoverflow.com/questions/544 ... grid-items