Indents between cells in grids

1

I’m trying to streamline the text with pictures on the right and bottom of the page. It is necessary to add indents between images. I do this:

.biblio {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: (100px, auto);
  grid-gap: 10px;
  grid-template-areas:
  "text text text text text text photo1 photo1 photo1"
  "text text text text text text photo2 photo2 photo2"
  "photo3 photo3 photo3 photo4 photo4 photo4 photo5 photo5 photo5"
}

.Bibliography {
  grid-area: text;
}

.box1 {
  grid-area: photo1;
}

.box2 {
  grid-area: photo2;
}

.box3 {
  grid-area: photo3;
}

.box4 {
  grid-area: photo4;
}

.box5 {
  grid-area: photo5;
}

As a result, I get indents to the right of the text, but they are not at the bottom. The screenshot below.

817×917

What am I doing wrong? Sorry for bad english.

2

Can you share a actual demo via codepen?

Meanwhile I will guess it has to with border sizes.

3

I can’t include links in posts yet. Remove spaces please
codepen . io/anon/pen/BEyRRQ

4

Try removing borders. Or make them thin.