How to center-align the last two items of a Portfolio page in 7.1

• 00
• 01
• 02
• 99

In a previous tutorial, we tackled how we could center-align the last two items of an Auto Layout set to Simple List.

This time around, we’ll be looking into how we can make this happen for the Portfolio pages in 7.1 as well.

We’ll be using the same grid-altering method from before, with a small modification to the way we target those last two slides so that, if you or your client have a ton of items, you don’t have to count them all.

Curious about this implementation? Then take a look at the tutorial!

Tutorial

Overview & timestamps

If you watched the previous tutorial for Auto Layouts you’ll see that the process here is basically the same, just with a few changes to the CSS:

1. 00:00 - Intro

2. 00:37 - Quick look at what I'm using
   Before jumping into the code, I’ll show you very quickly what I’m using for today’s example: the Grid Overlay layout. As I mentioned, this trick will also be applicable to the Grid: Simple layout, but the code required is slightly different and can be found below.

3. 01:11 - Modifying the grid
   Next up, it’s time to dive deep into the Inspector tool!
   We’ll check how the grid has been built to understand what needs to be modified, choose an appropriate selector for our customization depending on how laser-focused we want to get, escape the repeat( ) function in order to make it work correctly inside Squarespace’s editor, and lastly, expanding the slides to get back to the (seemingly) original grid.

4. 07:18 - Center-aligning the last two slides of the portfolio page
   Then, with our new columns in place, we can go ahead and move onto centering those pesky bottom slides. We have two options here in terms of how to target the first one: using the same method as before or trying with a new (and pretty freakin’ awesome) selector. I’ll let you guess what we’re doing.

5. 10:21 - Checking mobile

   Finally, it’s time to take a peek at mobile to see if we need to make any adjustments to our code. Hint: we do, but it’s a really simple one!
   

Now that was easy, right?

Hope you found it helpful!

Until next time,

B.

---

Full code

Grid: Overlay

/*HOW TO CENTER-ALIGN THE LAST TWO ITEMS OF A PORTFOLIO PAGE IN 7.1 (OVERLAY)*/
@media screen and (min-width: 768px) {
  .portfolio-grid-overlay {
    grid-template-columns: repeat(~"6, minmax(0px, 1fr)");
  }
  .portfolio-grid-overlay .grid-item {
    grid-column: span 2;
  }
  .portfolio-grid-overlay .grid-item:nth-last-of-type(2) {
    grid-column: ~"2/4";
  }
}

Grid: Simple

/*HOW TO CENTER-ALIGN THE LAST TWO ITEMS OF A PORTFOLIO PAGE IN 7.1 (SIMPLE)*/
@media screen and (min-width: 768px) {
  .portfolio-grid-basic {
    grid-template-columns: repeat(~"6, minmax(0px, 1fr)");
  }
  .portfolio-grid-basic .grid-item {
    grid-column: span 2;
  }
  .portfolio-grid-basic .grid-item:nth-last-of-type(2) {
    grid-column: ~"2/4";
  }
}