CSS to Stagger Simple Lists (Grid / Flexbox)

Site URL: https://pte.squarespace.com/careers

We need help with figuring out how to stagger the simple list grid under our careers-benefits section. We have a figma mockup reference that you can use to see what we are trying to achieve. We just would like to shift row 2. Thanks!

On 10/27/2021 at 2:04 AM, pbueno24 said:

Site URL: https://pte.squarespace.com/careers

We need help with figuring out how to stagger the simple list grid under our careers-benefits section. We have a figma mockup reference that you can use to see what we are trying to achieve. We just would like to shift row 2. Thanks!

You can try adding to Home> Design > Custom Css

section[data-section-id="6165ad78dbdd4e6480fd5c94"] .user-items-list-item-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
section[data-section-id="6165ad78dbdd4e6480fd5c94"] .list-item {
  width: 20%;
}

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

My testing result

Thank you Bangank36!!!

On 10/28/2021 at 11:11 PM, pbueno24 said:

Thank you Bangank36!!!

The code make images very small on mobile/tablet. You can check. If you need to fix, we will check & give the update code.