Custom Summary Block Image Layout

I am trying to customise the layout of my blog summary on desktop.

I want it to look like the image attached like what this website does: https://www.pentagram.com/ 

The summary block is on the  homepage of this website: https://timmarner.squarespace.com
Password: timmarner123

This is a fun one! I've not tried to recreate this before, so it'll need some tweaking to get it right, but add this to your custom CSS and maybe we have a start...

.portfolio-grid-basic {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(10vh, auto))
}
.grid-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.grid-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.grid-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.grid-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.grid-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

16 minutes ago, Ziggy said:

This is a fun one! I've not tried to recreate this before, so it'll need some tweaking to get it right, but add this to your custom CSS and maybe we have a start...

.portfolio-grid-basic {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(10vh, auto))
}
.grid-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.grid-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.grid-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.grid-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.grid-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.grid-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.grid-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.grid-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.grid-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.grid-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

 

Thanks for helping, I've added this to my custom CSS, but nothing has changed yet.

Sorry, wrong grid type, try this:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

You'll have to make the column width in the summary settings as large as you can.

9 minutes ago, Ziggy said:

Sorry, wrong grid type, try this:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 3';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'5 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'5 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 3';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 3';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'5 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'5 / span 1';
    grid-row: ~'6 / span 1';
  }

You'll have to make the column width in the summary settings as large as you can.

Hi, i've put this code in and it's definitely closer! I've also made the column width 600px (the highest you can do)

In my testing this works well if you make the summary block narrower.

3 minutes ago, Ziggy said:

In my testing this works well if you make the summary block narrower.

I see that when I make it smaller!

Is it possible to make this work when its full width?

And can it be designed so the big image takes up 50% of the width, and each smaller image takes 25% of the width? Right now the big image takes up more width than I would like

I'm butting my head up against the full-width not working, but try this update:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 2';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'3 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'3 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 2';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 2';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'3 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'3 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }

5 minutes ago, Ziggy said:

I'm butting my head up against the full-width not working, but try this update:

.summary-item-list {
  display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, minmax(1vh, auto));
    gap:20px;
}
.summary-item:nth-of-type(1) {
    grid-column: ~'1 / span 2';
    grid-row: ~'1 / span 2';
  }
.summary-item:nth-of-type(2) {
    grid-column: ~'3 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(3) {
    grid-column: ~'4 / span 1';
    grid-row: ~'1 / span 1';
  }
.summary-item:nth-of-type(4) {
    grid-column: ~'3 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(5) {
    grid-column: ~'4 / span 1';
    grid-row: ~'2 / span 1';
  }
.summary-item:nth-of-type(6) {
    grid-column: ~'3 / span 2';
    grid-row: ~'3 / span 2';
  }
.summary-item:nth-of-type(7) {
    grid-column: ~'1 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(8) {
    grid-column: ~'2 / span 1';
    grid-row: ~'3 / span 1';
  }
.summary-item:nth-of-type(9) {
    grid-column: ~'1 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(10) {
    grid-column: ~'2 / span 1';
    grid-row: ~'4 / span 1';
  }
.summary-item:nth-of-type(11) {
    grid-column: ~'1 / span 2';
    grid-row: ~'5 / span 2';
  }
.summary-item:nth-of-type(12) {
    grid-column: ~'3 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(13) {
    grid-column: ~'4 / span 1';
    grid-row: ~'5 / span 1';
  }
.summary-item:nth-of-type(14) {
    grid-column: ~'3 / span 1';
    grid-row: ~'6 / span 1';
  }
.summary-item:nth-of-type(15) {
    grid-column: ~'4 / span 1';
    grid-row: ~'6 / span 1';
  }

 

This works! the images are the right width now 🙂

I'm still looking for it to fill the screen more if you can get the whole thing to work wider?

Is it also possible to ignore all of this code on mobile? Leaving the summary block as it was before for just mobile?

I'll have another charge at the width issue tomorrow.

To apply just to desktop:
Add this in front of the code (with a } after and previous code inbetween)

@media only screen and (min-width:768px) {
   ///REPLACE WITH CODE///
}

16 hours ago, Ziggy said:

I'll have another charge at the width issue tomorrow.

To apply just to desktop:
Add this in front of the code (with a } after and previous code inbetween)

@media only screen and (min-width:768px) {
   ///REPLACE WITH CODE///
}

Thank you! Looks great on mobile now 🙂

That would be great if you could get it full width too !

And I was also wondering if there is a way to fill the white space in the image attached?

So that the bigger image block (including the title) is the same height as the two image blocks to the side of it

This might need just applying just to the large images, but try it like this anyway:

.summary-thumbnail .img-wrapper {
  padding-bottom:90%;
}

1 hour ago, Ziggy said:

This might need just applying just to the large images, but try it like this anyway:

.summary-thumbnail .img-wrapper {
  padding-bottom:90%;
}

 

I've added that but I'm not sure if its changed anything