Make the width 1fr + 1fr = 2fr (with mesh clearance)

Question

What is the correct way to have my first two columns have the same width as my third column? if I break them like this:

.grid {
    display:grid;
    grid-template-columns:1fr 1fr 2fr;
    grid-gap:2em;
}

<div class="grid">
    <div class="small">Col 1</div>
    <div class="small">Col 2</div>
    <div class="large">Col 3</div>
</div>

Run codeHide result

Example here: https://codepen.io/shorty2240/pen/baGYoW

I assumed that I could make another grid below this, with the same grid break, and 1fr 1fr, and it would line up, but obviously this would not happen.

I would like to avoid nesting the first two elements, if possible, since the actual project automatically outputs the three elements and wrapping around the first two can be problematic.

Answer 1

4 .large 2 .

CSS-, bootstrap foundation.

grid-template-columns:1fr 1fr 1fr 1fr;

.large {
  grid-column-start: 3;
  grid-column-end: 5;
}

4 grid.

Answer 2

@Rene, 4 ,

2 .small .

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
}

.grid div {
  background: grey;
  height: 75px; /* for demo purposes */
}

.small {
  grid-column: span 1;
}

.large {
  grid-column: span 2;
}

<div class="grid">
  <div class="small">Col 1</div>
  <div class="small">Col 2</div>
  <div class="large">Col 3</div>
  <div class="large">Col 4</div>
  <div class="large">Col 5</div>
</div>

Hide result