How can I create a 2 by 2 layout on this webpage?

Store Design

Topic summary

A user is seeking help to create a 2x2 grid layout on their product page (specifically for an abaya product).

Another user provides a CSS solution:

  • Navigate to the theme.css file
  • Add custom CSS code targeting .product-info__offer-list
  • The code implements a grid display with:
    • Auto-fit columns with minimum 180px width
    • Appropriate gap spacing using CSS variables

Status: Solution provided but not yet confirmed as implemented or tested by the original poster.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

https://layalinoor.com/products/noor-abaya-black-1

1.png
1.png618×220 4.99 KB

2

Hi @Jehad1 , go to theme.css and add the following code:

.product-info__offer-list {
    gap: var(--spacing-2);
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr)) !important;
    display: grid;
}