@zplane-web/craft-licensing

Auto Flow Grid 

<div class="auto-flow-grid" data-auto-flow-grid-type="files">

    <div class="auto-flow-grid__items">
        <div class="auto-flow-grid__item">
            <a class="file" title="Demo for Windows" href="file.zip" download="file.zip">
                <span class="file__icon">
                    <svg class="icon icon--arrow-down-to-line" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-down-to-line"></use>
                    </svg> </span>

                <span class="file__content">
                    <span class="file__title">
                        Demo for Windows
                    </span>

                    <span class="file__description">
                        Elastique Pitch Demo V2.2.5
                    </span>
                </span>
            </a>
        </div>
        <div class="auto-flow-grid__item">
            <a class="file" title="Demo for Windows" href="file.zip" download="file.zip">
                <span class="file__icon">
                    <svg class="icon icon--arrow-down-to-line" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-down-to-line"></use>
                    </svg> </span>

                <span class="file__content">
                    <span class="file__title">
                        Demo for Windows
                    </span>

                    <span class="file__description">
                        Elastique Pitch Demo V2.2.5
                    </span>
                </span>
            </a>
        </div>
        <div class="auto-flow-grid__item">
            <a class="file" title="Demo for Windows" href="file.zip" download="file.zip">
                <span class="file__icon">
                    <svg class="icon icon--arrow-down-to-line" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-down-to-line"></use>
                    </svg> </span>

                <span class="file__content">
                    <span class="file__title">
                        Demo for Windows
                    </span>

                    <span class="file__description">
                        Elastique Pitch Demo V2.2.5
                    </span>
                </span>
            </a>
        </div>
        <div class="auto-flow-grid__item">
            <a class="file" title="Demo for Windows" href="file.zip" download="file.zip">
                <span class="file__icon">
                    <svg class="icon icon--arrow-down-to-line" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-down-to-line"></use>
                    </svg> </span>

                <span class="file__content">
                    <span class="file__title">
                        Demo for Windows
                    </span>

                    <span class="file__description">
                        Elastique Pitch Demo V2.2.5
                    </span>
                </span>
            </a>
        </div>
        <div class="auto-flow-grid__item">
            <a class="file" title="Demo for Windows" href="file.zip" download="file.zip">
                <span class="file__icon">
                    <svg class="icon icon--arrow-down-to-line" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-down-to-line"></use>
                    </svg> </span>

                <span class="file__content">
                    <span class="file__title">
                        Demo for Windows
                    </span>

                    <span class="file__description">
                        Elastique Pitch Demo V2.2.5
                    </span>
                </span>
            </a>
        </div>
    </div>
</div>
 
{% set level = level ?? 1 %}

<div {{ html_attributes({
  id: id ?? false,
  class: 'auto-flow-grid',
  'data-auto-flow-grid-type': type,
}, attrs ?? {}) }}>
  {% if headline|default %}
    <div class="auto-flow-grid__headline">
      {% include '@headline' with headline | merge({
        size: 5,
        level: level,
      }) only %}
    </div>
  {% endif %}

  <div class="auto-flow-grid__items">
    {% for item in items %}
      <div class="auto-flow-grid__item">
        {% include use with item only %}
      </div>
    {% endfor %}
  </div>
</div>
 
{
  "type": "files",
  "use": "@file",
  "items": [
    {
      "title": "Demo for Windows",
      "link": "file.zip",
      "description": "Elastique Pitch Demo V2.2.5"
    },
    {
      "title": "Demo for Windows",
      "link": "file.zip",
      "description": "Elastique Pitch Demo V2.2.5"
    },
    {
      "title": "Demo for Windows",
      "link": "file.zip",
      "description": "Elastique Pitch Demo V2.2.5"
    },
    {
      "title": "Demo for Windows",
      "link": "file.zip",
      "description": "Elastique Pitch Demo V2.2.5"
    },
    {
      "title": "Demo for Windows",
      "link": "file.zip",
      "description": "Elastique Pitch Demo V2.2.5"
    }
  ]
}
  • Content: 
    @property --auto-flow-grid-min-size {
  inherits: true;
  initial-value: 0;
  syntax: '<length>';
}

@property --_auto-flow-grid-min-size {
  inherits: true;
  initial-value: 0;
  syntax: '<length>';
}

.auto-flow-grid {
  --_auto-flow-grid-min-size: calc(var(--auto-flow-grid-min-size) - var(--grid-gap));
  --_auto-flow-grid-columns: var(--auto-flow-grid-columns, 1);
  --_auto-flow-grid-gap-count: calc(var(--_auto-flow-grid-columns) - 1);
  --_auto-flow-grid-total-gap-width: calc(var(--_auto-flow-grid-gap-count) * var(--grid-gap));
  --_auto-flow-grid-max-size: calc((100% - var(--_auto-flow-grid-total-gap-width)) / var(--_auto-flow-grid-columns));

  &:is([data-auto-flow-grid-type='files']) {
    --auto-flow-grid-min-size: 28rem;
    --auto-flow-grid-columns: 4;
  }
}

.auto-flow-grid__headline:not(:last-child) {
  margin-block-end: calc(var(--grid-gap) * 1.5);
}

.auto-flow-grid__items {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(max(var(--_auto-flow-grid-min-size), var(--_auto-flow-grid-max-size)), 1fr));
}
  • URL: /components/raw/auto-flow-grid/auto-flow-grid.scss
  • Filesystem Path: src/components/3-molecules/auto-flow-grid/auto-flow-grid.scss
  • Size: 1.1 KB

No notes defined.