Как сохранить этикетку и вводиться вместе в адаптивной сетке CSS сетки? ⇐ Html

[Anonymous]

У меня есть HTML -структура, где этикетки и входы помещаются внутри Div с макетом сетки. Вот мой код: < /p>


div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}< /code>

Label 1

Label 2

Label 3

< /code>
< /div>
< /div>
< /p>
Сетка работает оперативно, но, поскольку этикетки и входы являются отдельными элементами, когда размер экрана меняется, они ослаблены. вместе).
Но на некоторых размерах экрана он автоматически создает 3 столбца, разбивая пару ввода метки на разные строки. Тем не менее, я не могу изменить структуру HTML (например, метка обертывания и ввод внутри A). < /P>
Вопрос:
Как я могу убедиться, что каждая метка остается с соответствующим входом без изменения структуры HTML? Существует ли чистого раствора CSS для обеспечения соблюдения только 4, 2 или 1 столбца, предотвращая макеты с 3-колодками?


Подробнее здесь: https://stackoverflow.com/questions/795 ... rid-layout