时间戳

首页 > 解决方案 > 使用显示“网格”时如何具有内容宽度？

html - 使用显示“网格”时如何具有内容宽度？

问题描述

我有以下容器：

#containerDiv {
  display: 'grid'
  grid-template-columns: 'repeat(6, auto)'
}

问题是孩子们占用的空间比他们的实际宽度更多。

我希望对齐 6 个子 div，但宽度应由内容决定，我不想设置最小/最大值。

想象一下：

<div id="#containerDiv">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

我希望宽度是内容宽度，然后我可以在每个孩子上使用边距/填充来设置我想要的样式。我该如何做到这一点？

代码在这里：

https://jsfiddle.net/57aqo32t/1/

标签： htmlcsscss-grid

解决方案

忘记网格系统，只需执行以下操作：

div {
  display: inline-block;
}

推荐阅读