Responsive blog page design (multiple columns)

I need my Twenty Seventeen child theme to be similar to this:
https://www.lahistoriaenmislibros.com/categoria/autores/
That’s to say, to have more than one post in blog page. I got something very near to that, but I found some problems:
– The amount of post showed for each page should fit the actual site-content size (actually, there is an even number of post in firts blog page)
– When showing a post (after clicking on it) the width should be restored to individual width.
– I need that the left margin of the first post of each row must be 0.

This is my actual code to get this:
.site-main
{
min-height: 400px;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: flex-start;
align-content: center;

border: 1px solid black;
}

.site-main:after {
display: block;
content: “nodo invisible “;
flex:999 999 auto;
}

.site-main article
{
flex: 0 0 auto;
margin-left: 6%;
height: auto;
width: 27%;
border: 1px solid red;
}

Please, any ideas?