使网格项跨度到隐式网格中的最后一行/列

问题描述 投票：0回答：6

当我不知道行数时，是否可以使网格项跨度从第一行到最后一行？

假设我有以下 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>

html css css-grid
6个回答
39
投票

当我不知道行数时，是否可以使网格项跨度从第一行到最后一行？

当前规范（级别 1）中似乎缺少针对此问题的自然网格解决方案。所以答案是“不”，严格来说是网格属性。

但是，正如

这个答案中所指出的，绝对定位是可能的。

虽然 CSS Grid 无法使网格区域跨越

隐式网格中的所有列/行，但它可以在显式网格中完成这项工作。

使用负整数。

以下是 CSS 网格规范中两个有趣的部分：

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;



再次强调，此方法仅适用于显式网格。 

    



      

      
      
      

      

        

          

            

              
28
投票

              

            

          

        

        
您可以将 
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>






这是一个非最佳解决方案，并不适用于所有浏览器，所以要小心！尽管这在某些浏览器（Chrome）中似乎可行，但其他浏览器（Firefox）会创建荒谬的行数，从而导致问题。

    



      

      
      
      

      

        

          

            

              
8
投票

              
            

          

        

        
对我来说实际有效的解决方案是在你想要增长到最后的元素上设置
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>





    



      

      
      
      

      

        

          

            

              
3
投票

              
            

          

        

        
因此，如果这似乎还不可能，您可能会选择更改结构并嵌套网格。 



如果您无法提前这样做，请使用 JavaScript 取出第三个框并将其放置在原始网格容器旁边。 







.container {
    display: grid;
    grid-template-columns: 65% 35%;
}

.nested_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: auto;
}

.box {
    background-color: blue;
    padding-bottom: 20px;
    border: 1px solid red;
}

.side {
    background-color: yellow;
    grid-column: 1 -1;
    border: 1px solid red;
}
<div class="container">
    <div class="nested_grid">
        <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 class="box"></div>
        <div class="box"></div>
    </div>
    <div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>





    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
这个答案是
对于重复的，它也没有定义行数。



跨度直到自动流动网格中的最后一行



您还可以使用 
:nth-last-child(n)
 选择器和 
:has()
 根据其包含的子项数量预设行数

现在适用于这个简单的网格。






body div.container {
  display: grid;
  grid-auto-flow: row dense;
  width: 250px;
  --gap: 2px;
  gap: var(--gap);
  margin: var(--gap);
  padding: var(--gap);
  background: yellow;
  counter-reset: divs 0;
}
.container > div:not(.side):after {
  counter-increment: divs;
  content: counter(divs);
}
div {
  border: solid;
  grid-row: auto;
  grid-column: 1;
  background: white;
}
.side {
  grid-column: 2;
  grid-row: -1 / var(--span);
  order: 1;
  background: blue;
}
/* if you use a css preprocessor, do a loop */
.container:has(:nth-last-child(2)) {
  --span: 2;
}
.container:has(:nth-last-child(3)) {
  --span: 3;
}
.container:has(:nth-last-child(4)) {
  --span: 4;
}
.container:has(:nth-last-child(5)) {
  --span: 5;
}
.container:has(:nth-last-child(6)) {
  --span: 6;
}
.container:has(:nth-last-child(7)) {
  --span: 7;
}
.container:has(:nth-last-child(8)) {
  --span: 8;
}
.container:has(:nth-last-child(9)) {
  --span: 9;
}
.container:has(:nth-last-child(10)) {
  --span: 10;
}

/* demo */
body {
  display: flex;
  flex-wrap:wrap;
  gap:2em;
  margin:2em;
  justify-content:center;
}
<div class="container">
  <div class="side"></div>
  <div>Row </div>
</div>
<div class="container">
  <div class="side"></div>
  <div>Row </div>
  <div>Row </div>
</div>
<div class="container">
  <div class="side"></div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
</div>
<div class="container">
  <div class="side"></div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
</div>
<div class="container">
  <div class="side"></div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
</div>
<div class="container">
  <div class="side"></div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
</div>
<div class="container">
  <div class="side"></div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
</div>
<div class="container">
  <div class="side"></div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <div>Row </div>
  <p style="margin:0;background:red;color:white;text-align:center">All preset selectors used
</div>






如果您使用 CSS 预处理器（我没有），则执行循环可以更轻松地编写
如果您最多有 24 行，则使用 SCSS 的示例


@for $i from 2 through 25 { 
  .container:has(:nth-last-child(#{$i})) {
  --span: #{$i};
}
}

    



      

      
      
      

      

        

          

            

              
-2
投票

              
            

          

        

        
对于 2022 年来到这里的人：


OP声明他们在问题标题中使用隐式网格，但在他们的代码示例中，他们使用以下方式定义网格：
grid-template-columns
和
grid-template-rows
，它们被定义为显式网格属性
由w3.org。

话虽这么说，这是一个跨越的解决方案
n number of rows
。


（如果需要，或者列，只需根据需要将 
rows
 替换为 
columns
）


如上所述，您可以简单地在网格项上设置 
grid-column-end: -1
 来实现完整的列跨越。早期的答案使这有点令人费解，并且在他们的示例中可能过于复杂。


您想要跨越所有行的网格项：


#item {
  grid-row-start: 1;
  grid-row-end: -1;
}

这是一个工作代码片段：






#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: row dense;
}


#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

/* Here’s the magic: */
#item4 {
  grid-row-start: 1;
  grid-row-end: -1;
  background-color: red;
}

#item5 {
  background-color: aqua;
}
<div id="grid">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4 (full span)</div>
  <div id="item5">5</div>
</div>





    

	

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.