CSS网格与动态定义列表自动放置 [英] CSS Grid vs dynamic definition list autoplacement
本文介绍了CSS网格与动态定义列表自动放置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
免责声明：根据spec，可以将dt + dd对包装成div，这将允许我使用float和clear、Flexbox甚至是CSS网格来简单地解决我的问题。
dt + dd对包装到单独的ul标记中。这也是可行的，尽管它在语义上不是100%准确。
现在我真正想做的就是使用css网格找到问题的解决方案，而不是求助于上述任何一种技术。
我的HTML中有以下结构：
dl
dt
dd
dt
dd
dt
dd
dt
dd
...
我想将它们分成2列2行显示，如下所示：
dt dt
dd dd
dt dt
dd dd
.. ..
我设法找到了一个解决方案，当我有4个配对并希望将它们显示在2x2网格中时：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">body {
font-family: sans-serif;
}
dl {
display: grid;
grid-gap: 0 1rem;
grid-template-columns: [col] 1fr [col] 1fr [col];
grid-template-rows: repeat(auto-fill, 1fr);
text-align: center;
}
dt {
padding: 0.25rem 1rem;
background: lightcoral;
}
dt:nth-of-type(2n + 1) {
counter-increment: left;
grid-column: col 1 / span 1;
}
dt:nth-of-type(2n) {
counter-increment: right;
grid-column: col 2 / span 1;
}
/* Comment out the following 2 selectors to see the "automatic behavior */
dt:nth-of-type(2) {
grid-row: 1;
}
dt:nth-of-type(4) {
grid-row: 3;
}
/* /Comment out */
dd {
margin: 0 0 1rem;
padding: 0.25rem 1rem;
background: lightcyan;
}
dd:nth-last-of-type(-n + 2) {
margin-bottom: 0;
}
dd:nth-of-type(2n + 1) {
grid-column: col 1 / span 1;
}
dd:nth-of-type(2n) {
grid-column: col 2 / span 1;
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="src/styles.css" />
</head>
<body>
<div id="app">
<dl>
<dt>Item 1</dt>
<dd>Nunc ut quam at sem vehicula hendrerit sed vitae risus</dd>
<dt>Item 2</dt>
<dd>
uisque a maximus mauris. Quisque metus quam, auctor ac porttitor.
</dd>
<dt>Item 3</dt>
<dd>
Aliquam varius est ac lectus malesuada, a sagittis arcu laoreet.
</dd>
<dt>Item 4</dt>
<dd>Etiam et sapien at mi ultrices maximus vitae vel arcu.</dd>
</dl>
</div>
</body>
</html>然而，这只是因为我手动定义了特定dt元素所在的行：
dt:nth-of-type(2) {
grid-row: 1;
}
dt:nth-of-type(4) {
grid-row: 3;
}
如果没有它，我将得到：
右侧项目的行位置偏离了%1。
有没有办法以一般方式将grid-row的值"移位"-1？
我还尝试将grid-row值与counter配对，但似乎不支持这样做。
推荐答案
grid-auto-flow: dense
如果指定，则自动放置算法使用"密集"打包算法，如果较小的项目较晚出现，该算法会尝试在网格中较早地填充空洞。这可能会导致项目显示为无序，因为这样做会填补较大项目留下的空白。ref
我还稍微简化了代码：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">body {
font-family: sans-serif;
}
dl {
display: grid;
grid-gap: 0 1rem;
grid-template-columns: 1fr 1fr;
text-align: center;
grid-auto-flow: dense;
}
dt {
padding: 0.25rem 1rem;
background: lightcoral;
}
dl > :nth-of-type(2n + 1) {
grid-column: 1;
}
dl > :nth-of-type(2n) {
grid-column: 2;
}
dd {
margin: 0 0 1rem;
padding: 0.25rem 1rem;
background: lightcyan;
}
dd:nth-last-of-type(-n + 2) {
margin-bottom: 0;
} <div id="app">
<dl>
<dt>Item 1</dt>
<dd>Nunc ut quam at sem vehicula hendrerit sed vitae risus</dd>
<dt>Item 2</dt>
<dd>
uisque a maximus mauris. Quisque metus quam, auctor ac porttitor.
</dd>
<dt>Item 3</dt>
<dd>
Aliquam varius est ac lectus malesuada, a sagittis arcu laoreet.
</dd>
<dt>Item 4</dt>
<dd>Etiam et sapien at mi ultrices maximus vitae vel arcu.</dd>
</dl>
</div>这篇关于CSS网格与动态定义列表自动放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
