Question

我有这个布局

X X X X
X X X X
A B

使用grid-template-columns：repeat（4，1fr）;

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

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

很抱歉，这个愚蠢的问题要看完整的课程，但是现在我真的需要完成此操作

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

Answer 2

您可以使用this website.

生成CSS网格

Here是有关CSS网格的完整指南。

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

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>

网格CSS具有最后两项来占用剩余空间

2 个答案: