How to integrate CSS Grid with Liquid for image display?

Hey! Im farily new to Shopify would like to ask this community for help. :grinning_face_with_smiling_eyes:

Im trying to combine CSS grid with Liquid. But Im having a difficult time understanding how it would work.

What I want tot do is create an grid displaying images and the grid solution I’m using is from this article:

https://www.shopify.com/partners/blog/css-grid

The problem I ran into is figuring out how I get it to work with Liquid. How do I integrate the grid with the “scheme” so that I can add more images in the actual CMS section and not in code?

This is the code Im using from the article:

<link href=“{{“responsive-grid.css” | asset_url }}” type=“text/css” rel=“stylesheet”>

{{section.settings.responsive_grid_title}}

{% if section.settings.show_css_grid_section == true %}




1


2


3


4

{% endif %}

{% schema %}
{
“name”: “CSS-Grid”,
“settings”: [

{
“type”: “checkbox”,
“id”: “show_css_grid_section”,
“label”: “Show CSS Grid”,
“default”: false
}
],
“presets”: [
{
“name”: “CSS Grid Test”,
“category”: “CSS Grid Test”
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

And this is the CSS:

.grid-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-column-gap: 10px;
grid-row-gap: 10px;
margin: 1em;
background-color: white;
}

.grid-cell {
background-color: #5C6AC4;
display: grid;
justify-content: center;
padding: 20px;
font-size: 70px;
color: white;
line-height: 1;
border-radius: 5px;
}

Hope I made my problem clear, if not let me know and I’ll explain it better.

Thank you for your time. :slightly_smiling_face:

1 Like

@Fezzahaye

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Hi @KetanKumar , thanks for the response and your offer to help.

My site URL is https://selamfessahaye-shop.myshopify.com/

Is that enough, or do you need more access?

Thank you for the welcome!

1 Like

@Fezzahaye

sorry your store password protect

@KetanKumar

My bad! The password is SelamShop2021

@Fezzahaye

i have check your code is work

@KetanKumar

Hi again, yes the code works on its own.

I want to be able to add images from the CMS panel.

I’ve attached an image.

On the right side I want to be able to add images to the CSS grid I created, is that possible?

yes customization possible

@KetanKumar

How?

The only option I have is “show grid”, how do I expand that?

@KetanKumar

I have now updated the code on the grid with this image tag:
{{ ‘Selam_Look_book__37394.jpg’ | img_url | img_tag: ‘Selam Lookbook 1’ }}

But the image wont show, could you have a look now why that is, please!

1 Like

sorry bt i can’t see code