Blog Post: How I built that

[Cathy_Sarisky]

It’s Halloween, so I’m sharing some of the wizardry I use to make the Ghost editor do things it doesn’t think it does… or something like that!

How I built that: Layouts for Ghost

[jaketheo]

Thank you for sharing this @Cathy_Sarisky! This wizardry gives a lot of possiblities for easier layouts in the editor.

I tried your code for three product cards in a row. At first they wouldn’t span wide width, so I added a width property. Now for the life of me I can’t get them to center in the middle of the page. Any thoughts on how to get them to span wide width and in the center?

Code I’m using:

<style>
.three-box {
    width: 70vw;
  grid-column: wide-start/wide-end;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }
  @media screen and (max-width:767px) {
    .three-box {
       grid-template-columns: 1fr; }
  }
  
  .three-box .kg-product-card-container {
    height: 100%;
    align-items: center;
  }
</style>

[Cathy_Sarisky]

It’s going to depend on the theme. You might add a wide image to your post and see what styles are affecting its layout…