使网格项跨越到隐式网格中的最后一行/列 [英] Make a grid item span to the last row / column in implicit grid

问题描述

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

假设我有以下 html，其中包含未知数量的框.

如何使第三个 .box 从第一条网格线延伸到最后一条网格线?

.container {显示:网格；网格模板列:repeat(3, minmax(10rem, 1fr)) [last-col] 35%;网格模板行:自动 [最后一行]；}.盒子 {背景颜色:蓝色；填充:20px；边框:1px纯红色；}.box:nth-child(3) {背景颜色:黄色；网格列:最后一列/跨度 1；网格行:1/最后一行；}

<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>

解决方案

您可以添加 grid-row-start 到那个盒子 css，并将其设置为一个高得离谱的数字.

.container {显示:网格；网格模板列:repeat(3, minmax(10rem, 1fr)) [last-col] 35%;网格模板行:自动 [最后一行]；}.盒子 {背景颜色:蓝色；填充:20px；边框:1px纯红色；}.box:nth-child(3) {背景颜色:黄色；网格列:最后一列/跨度 1；网格行:1/最后一行；网格行开始:跨度 9000；}

<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>

编辑 - 免责声明:

这是一个非最优的解决方案，并不适用于所有浏览器，小心！尽管这在某些浏览器 (Chrome) 中似乎可行，但其他浏览器 (Firefox) 会创建数量惊人的行，从而导致问题.

Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?

Lets say I have the following html with an unknown number of boxes.

How can I make the third .box span from the first grid-line to the last?

.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>

解决方案

You can add grid-row-start to that boxes css, and set it to span an absurdly high number.

.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>

Edit - Disclaimer:

This is a non-optimal solution and does not work in every browser, be careful! Although this may appear to work in some browsers (Chrome), other browsers (Firefox) will create the absurd number of rows which causes problems.

这篇关于使网格项跨越到隐式网格中的最后一行/列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！