为了账号安全,请及时绑定邮箱和手机立即绑定

使网格项目跨度到最后一行/最后一列

/ 猿问

使网格项目跨度到最后一行/最后一列

FFIVE 2019-10-21 12:39:07

当我不知道行数时,是否可以使网格项目从第一行到最后一行?


可以说我有以下HTML,其中的框数未知。


如何使.box第一个网格线到最后一个网格线的第三个跨度?


.container {

  display: grid;

  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;

  grid-template-rows: auto [last-line];

}


.box {

  background-color: blue;

  padding: 20px;

  border: 1px solid red;

}


.box:nth-child(3) {

  background-color: yellow;

  grid-column: last-col / span 1;

  grid-row: 1 / last-line;

}

<div class="container">

  <div class="box"></div>

  <div class="box"></div>

  <div class="box">3</div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

</div>


查看完整描述

3 回答

?
POPMUISE

您可以将grid-row-start添加到该框css,并将其设置为跨越一个非常大的数字。


.container {

  display: grid;

  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; 

  grid-template-rows: auto [last-line];

}


.box {

  background-color: blue;

  padding: 20px;

  border: 1px solid red;

}


.box:nth-child(3) {

  background-color: yellow;

  grid-column: last-col / span 1;

  grid-row: 1 / last-line;

  grid-row-start: span 9000;

}

<div class="container">

  <div class="box"></div>

  <div class="box"></div>

  <div class="box">3</div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

</div>


查看完整回答
反对 回复 2019-10-21
?
慕少森

当我不知道行数时,是否可以使网格项目从第一行到最后一行?


当前规范(级别1)似乎缺少针对此问题的自然网格解决方案。因此答案将是“否”,严格来说是使用Grid属性。


但是,如该答案所指出的,绝对定位可能是可行的。


尽管CSS网格无法使网格区域跨越隐式网格中的所有列/行,但它可以在显式网格中完成工作。


使用负整数。


这是CSS Grid规范中的两个有趣的部分:


7.1。显式网格


网格放置属性中的数字索引从显式网格的边缘开始计数。正索引从起始侧开始计数,而负索引从结束侧开始计数。


和这里...


8.3。基于行的展示位置:grid-row-start,grid-column-start,  grid-row-end,和grid-column-end性质


如果给定一个负整数,则从显式网格的末端开始倒数。


换句话说,当处理显式网格时,即使用以下属性定义的网格:


grid-template-rows

grid-template-columns

grid-template-areas

...您可以通过设置以下规则使网格区域跨越所有列:


grid-column: 3 / -1;

这告诉网格区域从第三列线到最后一列线。


相反的是:


grid-column: 1 / -3;

同样,此方法仅在显式网格中有效。


查看完整回答
反对 回复 2019-10-21
?
catspeake

对于我来说,实际上可以使用一种解决方案来设置position: absolute;要扩展到最后的元素。这将有其缺点,但在某些情况下可能会节省生命。这是一个完整的示例:


.grid {

  display: grid;

  grid-template: auto / auto 22px auto;

  position: relative;

}


.vline {

  position: absolute;

  height: 100%;

  width: 2px;

  background-color: black;

  grid-column: 2 / span 1;

  margin: 0 10px;

}


.grid h1:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }

.grid p:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }

.grid h1:nth-child(3) { grid-row: 3; grid-column: 3; }

.grid p:nth-child(4) { grid-row: 4; grid-column: 3; }

.grid h1:nth-child(5) { grid-row: 5; grid-column: 1; text-align: right; }

.grid p:nth-child(6) { grid-row: 6; grid-column: 1; text-align: right; }

.grid h1:nth-child(7) { grid-row: 7; grid-column: 3; }

.grid p:nth-child(8) { grid-row: 8; grid-column: 3; }

p, h1 { margin: 0; padding: 0; }

<div class="grid">

  <h1>1.</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>

  <h1>2.</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <h1>3.</h1>

  <p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>

  <h1>4.</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>

  <div class="vline"></div>

</div>


查看完整回答
反对 回复 2019-10-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信