Grid with 4 images and text

[pimpãoclothing]

Hello, can anyone tell me how I can create a grid of 4 images with accompanying text, like the image below? Thanks

 

[devcoders]

Hello @pimpãoclothing 

• Go to Online Store > Themes > Edit code.
• Under Sections, click Add a new section → Name it image-text-grid.
• Paste the above code.
• In the Customizer, add the section to your homepage or any template.
• Upload 4 images using the block settings.
• Customize the heading & paragraph.
  
  

<section class="image-text-grid-section">
  <div class="container">
    <div class="grid-content">
      <div class="image-grid">
        {% for block in section.blocks %}
          {% if block.type == 'image' %}
            <div class="grid-image">
              <img src="{{ block.settings.image | img_url: '500x' }}" alt="Image {{ forloop.index }}">
            </div>
          {% endif %}
        {% endfor %}
      </div>
      <div class="text-content">
        <h2>{{ section.settings.heading }}</h2>
        <p>{{ section.settings.paragraph }}</p>
      </div>
    </div>
  </div>
</section>

<style>
.image-text-grid-section {
  padding: 60px 0;
  background: #fff7f0;
}
.image-text-grid-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.grid-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}
.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  flex: 1;
}
.grid-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.text-content {
  flex: 1;
}
.text-content h2 {
  color: #a25636;
  font-size: 24px;
  margin-bottom: 20px;
}
.text-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}
@media (max-width: 768px) {
  .grid-content {
    flex-direction: column;
  }
  .text-content {
    text-align: center;
  }
}
</style>

{% schema %}
{
  "name": "Image Grid with Text",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Conforto, qualidade e carinho em cada detalhe."
    },
    {
      "type": "textarea",
      "id": "paragraph",
      "label": "Paragraph",
      "default": "As nossas roupinhas são feitas com tecidos macios e seguros, perfeitos para a pele sensível do seu bebê..."
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "max_blocks": 4,
  "presets": [
    {
      "name": "Image Grid with Text",
      "category": "Custom",
      "blocks": [
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" }
      ]
    }
  ]
}
{% endschema %}

[pimpãoclothing]

Nice it work! Now how do I align this section with the others?

[devcoders]

Hello @pimpãoclothing 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.image-text-grid-section .container {
padding: 0;
}
.grid-content .image-grid {
grid-gap: 15px;
}
.image-text-grid-section {
    padding: 10px 5rem;
}

[pimpãoclothing]

but in larger sizes +-1292px it looks like this