Hey! Im farily new to Shopify would like to ask this community for help. ![]()
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. ![]()