列数未定义的网格布局答案

【问题标题】：Grid layout with undefined number of columns列数未定义的网格布局
【发布时间】：2018-09-01 22:55:27
【问题描述】：

我有一个 HTML 模板：

 <ul>
           <li>1
	   <li>1
	   <li>22
	   <li>1
	   <li>1
	   <li>333
	   <li>1
	   <li>1
	   <li>22
	   <li>1
	   <li>1
</ul>

ul确定容器宽度。

我想用 undefined 列数构建表格样式的网格布局。

最小列大小受li的内容大小限制。

最大列大小可以是容器ul的整个宽度。

这是我想要实现的示例。

是否可以使用 CSS Grid 布局或任何其他布局？

【问题讨论】：

基本上....没有。你这里没有列，你有一个长的环绕行......所以你不能设置列的宽度，因为没有。如果您定义列的 number 列，那么我怀疑可以在 CSS-Grid 中解决一些问题。
我想也许它可以用一些魔法来完成，并且：grid-template-columns: repeat(auto-fill, minmax(???, ???)) 我已经尝试了很多东西，但没有成功。
table 元素在这方面做得很好

标签： html css flexbox grid-layout css-grid

【解决方案1】：

对于未定义的列数，我认为 CSS Grid 不可能。

关于您的评论：

我想也许可以用一些魔法来完成：grid-template-columns: repeat(auto-fill, minmax(???, ???))

这是合乎逻辑的方法，但这是一条死胡同。

必要的规则是这样的（使用auto-fill 或auto-fit）：

grid-template-columns: repeat(auto-fill, minmax(auto, auto))
grid-template-columns: repeat(auto-fill, minmax(auto, max-content))
grid-template-columns: repeat(auto-fill, auto)

使用min-content 和fit-content() 还有其他可能的变化。

唉，这些都行不通，因为repeat() 函数在与自动重复一起使用时，必须包含至少一个固定长度。

7.2.2.1. Syntax of repeat()

无法组合自动重复（auto-fill 或 auto-fit）具有固有或灵活尺寸。

intrinsic 大小调整函数是 min-content、max-content、auto、fit-content()。

flexible 大小调整函数是 <flex> (fr)。

CSS Grid 最接近的应该是grid-template-columns: auto，这是一个内联网格和定义的列数。我将发布此解决方案以获取一般信息。

ul {
  display: inline-grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 1px;
}

li {
  background-color: white;
}

ul {
  background-color: black;
  border: 1px solid black;
  list-style: none;
  padding: 0;
  font-size: 1.5rem;
}

<ul>
  <li>1</li>
  <li>1</li>
  <li>22</li>
  <li>1</li>
  <li>1</li>
  <li>333</li>
  <li>1</li>
  <li>1</li>
  <li>4444</li>
  <li>1</li>
  <li>1</li>
  <li>1</li><!-- added for demo -->
</ul>

在使用网格布局构建表格时可能会出现一个单独的问题：

CSS Grid border collapse (preventing double borders)

【讨论】：