Simple yet flexible Shopify section to add a grid of buckets

buckets.liquid

{% assign bucket_width_class = 'one-half' %}
{% if section.settings.columns == '3' %}
  {% assign bucket_width_class = 'one-third' %}
{% elsif section.settings.columns == '4' %}
  {% assign bucket_width_class = 'one-quarter' %}
{% endif %}
<section class="wrapper main-content{% if section.settings.width == 'width-full' %} full-width{% endif %}" style="{%
  if section.settings.width == 'width-1200' or section.settings.width == 'width-custom'
    %}max-width: {% if section_settings.width == 'width-custom' %}{{ section.settings.custom_width }}{% else %}1200{% endif %}px;{%
  else %}{% endif %}">
  <div id="buckets-{{ section.id }}" class="section-buckets">
    <div class="buckets grid columns-{{ section.settings.columns }}" style="{% if section.settings.item_spacing != blank %}margin-left: -{{ section.settings.item_spacing }}px;{% endif %}">
    {% if section.blocks.size > 0 %}
      {% for block in section.blocks %}
        {% assign image_size = 'grande' %}
        {% if block.settings.layout == 'full-width' %}
          {% assign image_size = 'master' %}
        {% endif %}
        {% assign perc_height_multiplier = 1 %}
        {% if section.settings.item_height contains '%' and block.settings.layout != 'full-width' %}
          {% assign perc_height_multiplier = section.settings.columns %}
        {% endif %}
      <div class="bucket grid__item large--{% if block.settings.layout == 'full-width' %}one-whole{% else %}{{ bucket_width_class }}{% endif %}"
        style="{%
            if section.settings.item_spacing != blank
              %}margin-top: {{ section.settings.item_spacing }}px; padding-left: {{ section.settings.item_spacing }}px;{%
            endif %}">
        <{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %}
          class="bucket-inner"
          style="background-image: url({{ block.settings.image | img_url: image_size }});{%
            if section.settings.item_height contains '%'
              %}height: auto; padding-top: {{ section.settings.item_height | replace: '%', '' | times: perc_height_multiplier }}%;{%
            else
              %}height: {{ section.settings.item_height }};{%
            endif %}">
          {% if block.settings.title != blank %}<span>{{ block.settings.title | newline_to_br }}</span>{% endif %}
        </{% if block.settings.url != blank %}a{% else %}div{% endif %}>
      </div>
      {% endfor %}
    {% endif %}
    </div><!-- .buckets.grid -->
  </div><!-- .buckets-section -->
</section>

{% schema %}
  {
    "name": "Buckets",
    "settings": [
      {
        "type": "select",
        "id": "width",
        "label": "Section Width",
        "options": [
          {
            "label": "1200px",
            "value": "width-1200"
          },
          {
            "label": "Full Width",
            "value": "width-full"
          },
          {
            "label": "Custom Width",
            "value": "width-custom"
          }
        ],
        "default": "width-1200"
      },
      {
        "type": "number",
        "id": "custom_width",
        "label": "Section Custom Width",
        "default": 800,
        "info": "Applies only if you select ‘Custom Width’ for the section width."
      },
      {
        "type": "select",
        "id": "columns",
        "label": "Columns",
        "options": [
          {
            "label": "2",
            "value": "2"
          },
          {
            "label": "3",
            "value": "3"
          },
          {
            "label": "4",
            "value": "4"
          }
        ],
        "default": "2"
      },
      {
        "type": "text",
        "id": "item_height",
        "label": "Items Height",
        "default": "32%",
        "info": "Specify height of items in percentage (of height) or pixels. For example: 32% or 280px"
      },
      {
        "type": "number",
        "id": "item_spacing",
        "label": "Items Spacing (in pixels)",
        "default": 20
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image Bucket",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "select",
            "id": "layout",
            "label": "Layout",
            "options": [
              {
                "label": "Boxed",
                "value": "boxed"
              },
              {
                "label": "Full Width",
                "value": "full-width"
              }
            ],
            "default": "boxed"
          },
          {
            "type": "textarea",
            "id": "title",
            "label": "Title"
          },
          {
            "type": "url",
            "id": "url",
            "label": "Link"
          }
        ]
      }
    ]
  }
{% endschema %}

section-buckets.scss

.section-buckets {
  position: relative;
  .buckets {
    .bucket {
      .bucket-inner {
        background: #EEE none center center no-repeat;
        background-size: cover;
        display: block;
           -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        span {
          color: #FFF;
          display: block;
          font-size: 30px;
          font-weight: 700;
          line-height: 1.1em;
          position: absolute;
          text-align: center;
          text-transform: uppercase;
          top: 50%;
          width: 100%;
          z-index: 1;
             -moz-transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
        }
      }
      a.bucket-inner::before {
        background-color: rgba(0,0,0,0);
        content: '';
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
             -moz-transition: background-color 0.3s ease 0s;
          -webkit-transition: background-color 0.3s ease 0s;
                  transition: background-color 0.3s ease 0s;
      }
      a.bucket-inner:hover::before {
        background-color: rgba(0,0,0,0.2);
      }
    }
  }
}