This code will transform all of the Summary Blocks on a website, that are using the “Grid” layout, into the 2 column grid design from above.

In the video above, I review all of the different items that you might want to adjust.

To target this code to one particular summary block, grab the block id, of that one summary block, and put all of the code below within the opening and closing curly brackets of that block id. The structure should look like this:

.summary-block-setting-design-autogrid .summary-item-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 68px 17px;

  .summary-item{
    margin: 0 !important;
    width: auto !important;

    border-bottom:1px solid grey;
  }
  .summary-content{
    display:flex;
    padding-top: 17px;
    padding-bottom:8px;
  }

  .summary-title{
    flex-grow: 1;
    font-weight:100;
    text-transform:uppercase;
    transition: opacity .5s ease;
  }
  .summary-metadata-container{
    flex-basis: 12ch;
    flex-shrink:0;
    text-align:right;

    * {
      font-weight:100;
      text-transform:uppercase;
      color:black;
      opacity: 1;
    }
  }

  .summary-thumbnail-outer-container{
    a{
      margin-bottom:0px !important;
    }
    img{
      filter: grayscale(100%);
      transition: filter .5s ease,
        transform 1.5s ease;
      will-change: transform;
    }
  }

  /*Hover Effects*/
  .summary-item:hover {
    img{
      filter: grayscale(0%);
      transform: scale(1.05);
    }
    .summary-title{
      opacity: .5;
    }
  }

  /*Mobile Styles*/
  @media(max-width:599px) {
    grid-template-columns: 1fr;
    gap: 51px;

    .summary-thumbnail-outer-container{
      width:100vw;
      left:50%;
      margin-left:-50vw;
    }
  }
}

Target a specific block

Use this CSS and just replace the #block-id with the block id of your summary block.

#block-id {
.summary-block-setting-design-autogrid .summary-item-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 68px 17px;

  .summary-item{
    margin: 0 !important;
    width: auto !important;

    border-bottom:1px solid grey;
  }
  .summary-content{
    display:flex;
    padding-top: 17px;
    padding-bottom:8px;
  }

  .summary-title{
    flex-grow: 1;
    font-weight:100;
    text-transform:uppercase;
    transition: opacity .5s ease;
  }
  .summary-metadata-container{
    flex-basis: 12ch;
    flex-shrink:0;
    text-align:right;

    * {
      font-weight:100;
      text-transform:uppercase;
      color:black;
      opacity: 1;
    }
  }

  .summary-thumbnail-outer-container{
    a{
      margin-bottom:0px !important;
    }
    img{
      filter: grayscale(100%);
      transition: filter .5s ease,
        transform 1.5s ease;
      will-change: transform;
    }
  }

  /*Hover Effects*/
  .summary-item:hover {
    img{
      filter: grayscale(0%);
      transform: scale(1.05);
    }
    .summary-title{
      opacity: .5;
    }
  }

  /*Mobile Styles*/
  @media(max-width:599px) {
    grid-template-columns: 1fr;
    gap: 51px;

    .summary-thumbnail-outer-container{
      width:100vw;
      left:50%;
      margin-left:-50vw;
    }
  }
}
}

Remove the Date and Center the Title

Using the Summary Block Editor, remove the "Primary Metadata" field that holds the date and center the text in the design tab. Then, in the code above, set the flex-basis value for the summary-metadata-container to 0.

.summary-metadata-container{
  flex-basis: 0;
}

Summary Block Style #1 [for Grids]

Comments