Загадка CSS-сетки: заполнение элементов сетки - PullRequest
Новая
       10

Загадка CSS-сетки: заполнение элементов сетки

0 голосов
/ 30 января 2019

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

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

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

Без заполнения в полях ввода: https://imgur.com/a/NB1RcVS и https://imgur.com/a/nz5lvIw

С заполнением: https://imgur.com/a/Ak6CvlX и https://imgur.com/a/hqLlxBr

<form id="email">
<div class="form-group" id="form-name">
    <label for="name-field">Name</label>
    <input type="text" name="name-field" id="name-field" required>
</div>
<div class="form-group" id="form-address">
    <label for="address-field">Email Address</label>
    <input type="text" name="address-field" id="address-field" required>
</div>
<div class="form-group" id="form-message">
    <label for="message-field">Message</label>
    <textarea name="message-field" id="message-field" cols="32" rows="8" required></textarea>
</div>
<button id="send-button" type="submit" form="email" name="send-it">Send it</button>

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

Ответы [ 2 ]

0 голосов
/ 30 января 2019 
#name-field, #address-field, #message-field {
    padding: 10px;
}

или 15px, если вы хотите, чтобы он был близко

0 голосов
/ 30 января 2019

Добавьте это в начало вашего кода 

*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
...