Indents between cells in grids

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;
  "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.

What am I doing wrong? Sorry for bad english.

Can you share a actual demo via codepen?

Meanwhile I will guess it has to with border sizes.

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

Try removing borders. Or make them thin.