grid css 2 column and second column with 2 rows

Question

I am new to the grid css and I want to achieve somenthing like this

I'm stuck with the first one and can't fix the proper ordering of the 2nd column

Here's what I did

.image-wrapper {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: repeat(2, 1fr);

        .image-container:nth-child(1) {
            grid-column-start: 1;
        }

        .image-container:nth-child(2) {
            grid-column-start: 2;
            grid-row: 2;
        }

        .image-container:nth-child(3) {
            grid-column-start: 2;
            grid-row: 3;
        }
    }

Answer 1

To create similarly styled layouts, you can try and use the grid-area concept. Check out this amazing, interactive guide by Josh Comeau.

Using the code from the example on the website (resize the window to see the mobile layout), you can create a mobile-first approach like the following snippet:

.parent {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.child {
  grid-area: sidebar;
  background-color: #eee;
}

div {
  border: 1px solid grey;
  border-radius: 0.25rem;
  padding: 1rem;
}

@media only screen and (min-width: 600px) {
  .parent {
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-template-rows: 50px 1fr;
    grid-template-areas: 'sidebar header' 'sidebar main';
  }
}

<div class="parent">
  <div class="child">
    child
  </div>
  <div>
    else
  </div>
  <div>
    something else
  </div>
</div>

On a final note, make sure to search on Stackoverflow before posting your question, this and similar questions have already been answered.