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

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 Grid 布局或任何其他布局？

Answer 1

对于未定义的列数，我认为 CSS 网格不可能实现。

关于您的评论:

I thought maybe it could be done with some magic and: 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()

Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.

• An intrinsic sizing function is min-content, max-content, auto, fit-content().

• A flexible sizing function is <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)