Grid CSS having the last two items to take the remaining space

Question

I have this layout

X X X X
X X X X
A B

With grid-template-columns: repeat(4, 1fr);

But I actually want the two last items to take the full width of the remaining space, like :

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

Sorry for the dumb question, gonna watch a complete course but right now I really need to get this done

score 0 · Answer 1 · answered Oct 04 '20 at 14:37

you can also use :nth-last-child() and grid-column:span2; if your markup is always the same.

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>

score -1 · Answer 2 · answered Oct 04 '20 at 14:12

You can generate a CSS grid using this website.

Here is a complete guide about CSS Grid.

Added a red border, margin and height, so the desired grid is visible.

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>

Grid CSS having the last two items to take the remaining space

2 Answers2