Two columns of pictures to the right of the text

1

How to make the pictures lined up in 2 columns to the right of the text using the grid? Now we have the following picture:

1235×781

Here to the right of the first column there is free space, how to fill it with the second column of pictures?
Here is my code: codepen . io/stormwarn1ng/pen/OGVygz (delete spaces)
I’ve been experimenting for a long time with grid-column-start and others, so don’t attach importance to the fact that some of them are not composed according to a given grid.
Thank you for your advice

2

I’m trying to implement with the help of “COLUMNS:” property, so it seems to work. But the question about the grid remains open. Or grids are not used for such tasks? I am just learning.

3

Nah. This does not work.

4

Well, I tried to do it like this, I found it in Google:

body {
  padding: 50px;
}

.container {
  border: 3px solid blue;
  padding: 20px 40px 40px;
  max-width: 640px;
  display: flex;
}
.container__image {
  margin: 20px 30px 0 0;
  width: 200px;
  -o-object-fit: contain;
     object-fit: contain;
  align-self: flex-start;
}
.container__text {
  flex: 1 1 auto;
}

But in this solution only 1 column with a picture is used and the picture for some reason does not want to change the size, it is shown in the original.