How do I control image ratios within a {display: grid} layout?

Site URL: https://www.thislandisdigital.com/

Context: I've spent some time trying to apply a custom grid layout to my index so that I can highlight certain projects with double sized thumbnails. To do this I followed this tutorial which targets an index: gallery block from a different template rather than the standard index I have available in Avenue (not sure if the scaling is different because of this). I was able to successfully assign an area to each of the index thumbnails and arrange them the way I wanted using grid-template-areas with one main issue.

Problem: The thumbnails are forced to match the aspect ratio in my site style rather than cropping or stretching to fill the grid's literal space. What I want is to have a combination of 2/1 and 1/1 aspect ratios. My site style can be one or the other (50 or 100). No matter which I choose, the grid is being stretched vertically to match the same ratio.

Here's my code so far. I'll deal with the tablet and mobile arrangements when I solve the desktop issues.

#collection-5c89d82aee6eb05083075575 #projectThumbs {
  > div {
    // Create a grid layout on the index.
    display: grid;
    // Visually map the named items below to the grid using spaces. Repetition matters.
    grid-template-areas:
      "firstAB firstAB firstCD firstCD"
      "secondA secondB secondC secondD"
      "thirdA thirdBC thirdBC thirdD"
      "fourthA fourthB fourthC fourthD";
    @media screen and (max-width: 800px) {
      //grid-template-areas: "";
    }
    @media screen and (max-width: 640px) {
      //display: block;
    }
  }
 
  // First Row
  a:nth-of-type(1){
    grid-area: firstAB;  // Name of the item.
  }
  a:nth-of-type(2){
    grid-area: firstCD;
  }
  // Second Row
  a:nth-of-type(3){
    grid-area: secondA;
  }
  a:nth-of-type(4){
    grid-area: secondB;
  }
  a:nth-of-type(5){
    grid-area: secondC;
  }
  a:nth-of-type(6){
    grid-area: secondD;
  }
  // Third Row
  
  a:nth-of-type(7){
    grid-area: thirdA;
  }
  a:nth-of-type(8){
    grid-area: thirdBC;
  }
  a:nth-of-type(9){
    grid-area: thirdD;
  }
  // Fourth Row
   a:nth-of-type(10){
    grid-area: fourthA;
  }
  a:nth-of-type(11){
    grid-area: fourthB;
  }
  a:nth-of-type(12){
    grid-area: fourthC;
  }
  a:nth-of-type(13){
    grid-area: fourthD;
  }
}

I attached a picture of the result I want vs. the result I'm getting.

* I had to temporarily revert my site to a standard 4-wide index and comment the CSS out. Didn't want to leave my site up in a broken state while I wait for a solution (it requires a 1-wide index for some reason). I was able to reduce the visible size of specific images, but only the image element and not whatever larger element it's attached to (still new to CSS). Hopefully the screenshots and my code will be enough to get a hint or direction.

Any help on this one? I've tried looking into CSS grid tutorials and most of them either focus on text (which doesn't need perfect ratios so much) or on sites built from scratch. Modifying Squarespace for this purpose is clearly not ideal with so much of the structure unknown to me. I was able to extend the approach I was already using by rescaling the 2:1 images, but the clickable square around them remained the same size no matter how many divs I tried to resize.

I've also messed with other approaches to creating the mixed grid shown in my last screenshot with no real success. If anyone can get me through doing this an alternate way I'd be happy to hear it. For most of my attempts, the limiting factor was almost always the vertical scaling of images and their subsequent filling of the resulting block.

I tried creating a new page with multiple squarespace grid blocks stacked on top of each other to represent each line of the grid. Each grid block allows for only one ratio and the block itself doesn't actually include 2:1 in its drop down (not sure why). A third issue is that the number of items per line would dynamically scale, creating asymmetrical variations of my symmetrical design.

I also tried creating a page with a series of image blocks placed in a stack on the page. This placed them all as siblings within the same container (column>row>image blocks). With this I started building the same {display: grid} approach as on the front page. The big problem I had here is that the image blocks themselves could be resized vertically using the handle, yet the resulting size value was nowhere to be found. The images kept cropping themselves all out of whack and making it impossible to create anything like a clean, maintainable grid.

As far as my closest approach using the repurposed index, below is my current code setup (in order for it to work, I need to change my thumbnails per-line back to 1 rather than 4. Since I can't leave my site up broken, refer to my screenshots). By selecting the images, I can force them to consume the entire thumbnail space but couldn't quite figure out how to link the height to the width itself to create a 2:1 ratio. If I force the heights of each row to 300px to match the thumbnails, the clickable region is still a full square and the lower thumbnails just overlap it. At this point I'm too confused to get anywhere.

// Settings for larger thumbnails.
#collection-5c89d82aee6eb05083075575 #projectThumbs {
  a.project:nth-child(1) img,
  a.project:nth-child(2) img,
  a.project:nth-child(8) img {
    height: 100% !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  a.project:nth-child(1),
  a.project:nth-child(2),
  a.project:nth-child(8){
    //height: 100% !important;
    //width: 100% !important;
  }
}

// Assign a grid display to the wrapper beneath #projectThumbs.
#collection-5c89d82aee6eb05083075575 #projectThumbs>div {
  // Display the wrapper element as a grid.
  display: grid;
  // Divide the page into columns that each take up one "fraction".
  grid-template-columns: 1fr 1fr 1fr 1fr;
  //grid-template-rows: 1fr 1fr 1fr 1fr; //300px 300px 300px 300px;
  
  /*
  // ALTERNATING = Two big, four small, two big, four small, four small
  grid-template-areas:
    "one one two two"
    "three four five six"
    "seven seven eight eight"
    "nine ten eleven twelve"
    "thirteen fourteen fifteen sixteen";
  */
  /*
  // SWITCHBACKS = Two big, four small, center big, four small, center big
  grid-template-areas:
    "one one two two"
    "three four five six"
    "seven seven eight nine"
    "ten eleven twelve twelve"
    "thirteen fourteen fifteen sixteen";
  */
  
  // CENTER ISLANDS = Two big, four small, center big, four small, center big
  grid-template-areas:
    "one one two two"
    "three four five six"
    "seven eight eight nine"
    "ten eleven twelve thirteen"
    "fourteen fifteen fifteen sixteen";
  
  /*
  // BASIC GRID = 4x4 small images.
  grid-template-areas:
    "one two three four"
    "five six seven eight"
    "nine ten eleven twelve"
    "thirteen fourteen fifteen sixteen";
   */
  
  @media screen and (max-width: 800px) {
    display: block;
  }
  @media screen and (max-width: 640px) {
    display: block;
  }
}

// Name the generic children of the layout in whatever order they appear.
#collection-5c89d82aee6eb05083075575 #projectThumbs>div {
  a:nth-of-type(1){
    grid-area: one;  // Name of the item.
  }
  a:nth-of-type(2){
    grid-area: two;
  }
  a:nth-of-type(3){
    grid-area: three;
  }
  a:nth-of-type(4){
    grid-area: four;
  }
  a:nth-of-type(5){
    grid-area: five;
  }
  a:nth-of-type(6){
    grid-area: six;
  }  
  a:nth-of-type(7){
    grid-area: seven;
  }
  a:nth-of-type(8){
    grid-area: eight;
  }
  a:nth-of-type(9){
    grid-area: nine;
  }
   a:nth-of-type(10){
    grid-area: ten;
  }
  a:nth-of-type(11){
    grid-area: eleven;
  }
  a:nth-of-type(12){
    grid-area: twelve;
  }
  a:nth-of-type(13){
    grid-area: thirteen;
  }
  a:nth-of-type(14){
    grid-area: fourteen;
  }
  a:nth-of-type(15){
    grid-area: fifteen;
  }
  a:nth-of-type(16){
    grid-area: sixteen;
  }
}

I wish I could help, but I'm a novice here, so I don't have an answer for you, but I wonder if you can help me. I want to use css to have different grid layout parameters for different index pages. Do you know how I would do that? Thank you!

I never managed to find the settings for thumbnails myself. It sounds like you're trying to assign site styles for individual pages but my gut tells me that Squarespace's settings aren't stored and accessible through CSS. Those settings inform the CSS, though, so maybe there's a way to override all of the appropriate values.

The first step would be to isolate a specific page, which results in a selector that looks like "#collection-12345". There's a Squarespace Collection/Block Identifier extension for Chrome that, when enabled, will show the IDs of various blocks and pages (you might need to load the page directly rather than through the editor). It'll give a selector with #collection-12345 which you'd put at the top to ensure the CSS only affects that one page.

At one point I had wanted to have an index page with squares and a separate index page with rectangle thumbnails, so I'm curious about that question as well. Squarespace's docs have their usual neutral explanation that addresses the question, suggests it's possible, and then leaves no explanation how:

Quote

Can I set different styles for each page? 

Each style tweak applies site-wide, wherever that element appears. This keeps your site's design clean and consistent.

For example, if you change the font and color of your Heading 1, all Heading 1s on your site will change. Similarly, any style changes to body text, buttons, page titles, social icons, etc. will apply across all pages on your site. It isn't possible to vary these site-wide tweaks by page without custom code.

All of the rest is a mystery to me. I was already struggling to override Squarespace's default block layouts. I never seem to be able to find just the right size and padding values to change so everything I touch gives me partial success only. If the grid layout I was using in the above post or in my other post on the same topic can be made to work, it would probably solve your problem.

A possible alternative is to use image blocks manually arranged and linked. If you cropped the thumbnails yourself, the automatic scaling might give you the effect you need. Then you would only need to find ways to control the padding on the whole page.

I had this issue it trying to show full images in a "Featured In" Grid and @e2astudio gave this handy bit of code.

Hi, I am posting here as I am referring to first two posts. I have been traying to do a custom gallery layout in 7.1. I have been following the mentioned tutorial: 

and was trying to adapt it to 7.1. squarespace. I would like to get this layout - you can see in attach - yet I have been trying for hours and it doesnt work. 

Can you please check my code and give some advice. There is smth off in the gallery-grid-wrapper. I was comparing to yours code, but..yes, I am a total rookie. I hope some someone will help me out. Thanks!

  "small3 big2"
    "small4 big2"