CSS Grid Layout with 3 even squares and 1 odd square

Question

I am trying to get the following layout using grid:

This is my code so far. Row gap and column gap are not quite right in the output. I'm not sure if there is any other property that needs to be set.

div.grid-container {
        display: grid;
        grid-template-columns: 50% 50%;
        column-gap: 1px;
        row-gap: 1px;
    }
    
    div.box-small {
    width: 30px;
    height: 30px;
    background: gray;
    }
    
        div.box-big {
    width: 50px;
    height: 50px;
    background: gray;
    }

<div class="grid-container">
                <div class="box-small"></div>
                <div class="box-big"></div>
                <div class="box-small"></div>
                <div class="box-small"></div>
            </div>

Answer 1

You just need to align the small divs to the end of their cells with align-self: end;

Example:

div.grid-container {
  display: inline-grid;
  grid-template-columns: 3fr 5fr;
  column-gap: 10px;
  row-gap: 10px;
  margin: 1em;
  border: 1px solid grey;
}

div.box-small {
  width: 30px;
  height: 30px;
  background: gray;
  align-self: end;
}

div.box-big {
  width: 50px;
  height: 50px;
  background: gray;
}

<div class="grid-container">
  <div class="box-small"></div>
  <div class="box-big"></div>
  <div class="box-small"></div>
  <div class="box-small"></div>
</div>