Jump to content

How to change numbers of column in a row in a portfolio layout grid:simple?

Go to solution Solved by Lesum,

Recommended Posts

Posted

Site URL: https://www.cdvstudio.com/projects

Hi! I have a portfolio page called projects with layout grid:simple. I would like to change number of colums per row. In the first row I would like one column, in the second row two columns and three in the third. How can I do that? Should I add a code in the CSS?

Thank you so much

  • Solution
Posted

@CdVstudio Hi! You can add this code under Website > Pages > Website Tools > Custom CSS

@media screen and (min-width: 1025px) {
    #gridThumbs {
      display: flex !important;
      flex-wrap: wrap;
      gap: 40px;
    }

    .grid-item {
      flex: 0 0 100%; 
    }

    .grid-item:nth-child(2), .grid-item:nth-child(3) {
      flex: 0 0 calc(50% - 40px);
    }

    .grid-item:nth-child(4), .grid-item:nth-child(5), .grid-item:nth-child(6) {
      flex: 0 0 calc(33.333% - 40px); 
    }
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.