#html #css #css-grid
#HTML #css #css-сетка
Вопрос:
У меня есть следующий контейнер:
#containerDiv {
display: 'grid'
grid-template-columns: 'repeat(6, auto)'
}
Проблема в том, что дочерние элементы занимают больше места, чем их фактическая ширина.
Я хочу, чтобы 6 дочерних элементов были выровнены, но ширина должна определяться содержимым, я не хочу устанавливать минимальное / максимальное значение.
Представьте себе следующее:
<div id="#containerDiv">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Я хочу, чтобы ширина была шириной содержимого, а затем я могу использовать поля / отступы для каждого дочернего элемента, чтобы придать ему желаемый стиль. Как мне это сделать?
Код здесь:
Комментарии:
1. то, что вы описываете, не является сеткой. Простой встроенный блок для ваших элементов и готово. нет необходимости в grid или flexbox
2. попробуйте
display: inline-grid;
Ответ №1:
Забудьте о сеточной системе и просто сделайте это:
div {
display: inline-block;
}