Почему элементы слились в grid'е?

Question

[Илья Кузнецов]

https://codepen.io/anon/pen/KYNGRr

Почему элементы слиплись? Продолжаю гуглить, но ответа не нахожу.

Answer 1

[Сергей delphinpro]

Потому что два элемента по 50%. Как еще вы хотите?

Нужен промежуток — задайте его:

.input_boxes_flex {
    display: grid;
/*    grid-template-columns: 50% 50%; */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

Comments

[Илья Кузнецов]

тогда как мне их разместить так, чтобы между ними был пробел?
upd: сейчас проверю.
upd: не знаю, что на меня нашло, но ваш совет помог.

[Илья Кузнецов]

Сергей delphinpro, тогда как мне выровнить предыдущие элементы по краям этих двух?

[Сергей delphinpro]

Илья Кузнецов, точно так же