具有未定义列数的网格布局

Question

我有一个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 确定容器宽度。

我想使用未定义列数构建表格样式网格布局。

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

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

这是我想要实现的例子。

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

Answer 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)