具有最后两项以占用剩余空间的网格 CSS [重复]答案

【问题标题】：Grid CSS having the last two items to take the remaining space [duplicate]具有最后两项以占用剩余空间的网格 CSS [重复]
【发布时间】：2021-01-19 13:10:51
【问题描述】：

我有这个布局

X X X X
X X X X
A B

使用网格模板列：repeat(4, 1fr);

但我实际上希望最后两个项目占据剩余空间的全部宽度，例如：

X X X X
X X X X 
A A B B

对不起这个愚蠢的问题，我会看完整的课程，但现在我真的需要完成这个

【问题讨论】：

标签： css css-grid

【解决方案1】：

如果您的标记始终相同，您也可以使用:nth-last-child() 和grid-column:span2;。

body>div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

div {
  border: solid 1px;
  margin: 3px;
}

div div:nth-last-child(1),
div div:nth-last-child(2) {
  grid-column: span 2;
  color: green;
}

<div>
  <div>x</div>
  <div>x</div>
  <div>x</div>
  <div>x</div>
  <div>x</div>
  <div>x</div>
  <div>x</div>
  <div>x</div>
  <div>a</div>
  <div>b</div>
</div>

【讨论】：

【解决方案2】：

您可以使用 this website. 生成 CSS 网格

Here 是关于 CSS Grid 的完整指南。

添加了红色边框、边距和高度，因此所需的网格可见。

div{
border: 5px solid red;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0px 0px;
  grid-template-areas:
    "X X X X"
    "X X X X"
    "A A B B";
    height:100px;
    width:100px;
}
.X { grid-area: X; }
.A { grid-area: A; }
.B { grid-area: B; }

<div class="grid-container">
  <div class="X">XXXX</div>
  <div class="A">AA</div>
  <div class="B">BB</div>
</div>

【讨论】：