如何跨所有动态行跨网格单元格? [英] How to span a grid cell across all dynamic rows?
问题描述
所附示例正常运行, .container
的第一个子元素跨所有行,但问题在于 grid-row-end
值取决于 div.container
的多个子代.是否可以在没有魔术常数(4)且不更改HTML结构的情况下做到这一点.不幸的是,仅对于显式网格,才可以使用 grid-row-end:-1
.
The attached example works properly, the first child of .container
is spanned across all rows, but the problem is that the grid-row-end
value is dependent on a number of children of div.container
. Is it possible to do it without the magic constant (4) and WITHOUT changing an HTML structure. Unfortunately using grid-row-end:-1
is possible only for the explicit grids.
.container {
display:grid;
grid-gap: 0.4em;
}
.container > * {
background-color: lightgray;
}
.container *:first-child {
grid-column: 1;
grid-row-start: 1;
grid-row-end: 4;
}
.container *:not(:first-child) {
grid-column: 2;
}
<div class="container">
<div>IMG</div>
<div>A</div>
<div>B</div>
<div>...</div>
</div>
推荐答案
这已经被问到了使网格项跨度到最后一行/最后一列 -Roko C. Buljan
如果您删除
gap
属性并改为在子级(位于第二列和第二行)中分配margin
,则可以设置一个哈希值可能的数字永远不会匹配或最多等于网格 – G-Cyrillus
if you remove the
gap
propertie and instead dispatchmargin
on the children (standing in the second column and from the second row, you can set a hudge value that the possible numbers will never match or be at the most the same amount of actual rows of the grid – G-Cyrillus
链接的问题未考虑差距设置.
the linked question did not take into account the gap set.
我的评论的片段绘图:
.container {
display:grid;
}
.container > * {
background-color: lightgray;
}
.container *:first-child {
grid-column: 1;
grid-row-start: 1;
grid-row-end: 100;/* use a value that will over the expected numbers of row */
grid-gap:0; /* empty rows will collapse to none height */
grid-auto-rows:auto; /* do not give an height here , else empty rows will use space */
margin-right:0.2em;
}
.container :nth-child(2) {
margin-left:0.2em;
grid-column:2;
}
.container :nth-child(2) ~ div {
grid-column:2;
margin-top:0.4em;
margin-left:0.2em;
}
<div class="container">
<div>IMG</div>
<div>A</div>
<div>B</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
编辑
如果您可以使用javascript
If javascript is okay with you
let rowsToSpan = document.querySelectorAll(".container>*");
rowsToSpan[0].style.gridRowEnd = rowsToSpan.length
.container {
display: grid;
grid-gap: 0.4em;
}
.container>* {
background-color: lightgray;
}
.container *:first-child {
grid-column: 1;
grid-row-start: 1;
/*grid-row-end: 4;*/
}
.container *:not(:first-child) {
grid-column: 2;
}
<div class="container">
<div>IMG</div>
<div>A</div>
<div>B</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
灵感来自 https://codepen.io/gc-nomade/pen/pRYPwK
这篇关于如何跨所有动态行跨网格单元格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!