<div class="grid grid--small">
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
    <div class="nc-placeholder ">
        <p>Placeholder</p>
    </div>
</div>
{% if grid is not empty or block('grid_items') is not empty %}
{% set gridclass = "grid " ~ grid.variant %}
<div class="{{ gridclass }}">
  {% block grid_items %}
    {% for i in grid.items %}
      {% include i.pattern with i.context %}
    {% endfor %}
  {% endblock %}
</div>
{% endif %}
{
  "grid": {
    "items": [
      {
        "pattern": "@placeholder"
      },
      {
        "pattern": "@placeholder"
      },
      {
        "pattern": "@placeholder"
      },
      {
        "pattern": "@placeholder"
      },
      {
        "pattern": "@placeholder"
      },
      {
        "pattern": "@placeholder"
      },
      {
        "pattern": "@placeholder"
      },
      {
        "pattern": "@placeholder"
      },
      {
        "pattern": "@placeholder"
      },
      {
        "pattern": "@placeholder"
      }
    ],
    "variant": "grid--small"
  }
}
  • Content:
    .grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin: ($grid-gap / -2);
      overflow: hidden;
    
      > * {
        flex-basis: $grid-min;
        flex-grow: 1;
        flex-shrink: 1;
        width: 100%;
        min-width: $grid-min;
        margin: ($grid-gap / 2);
      }
    
      > .paragraph {
        &:first-child,
        &:last-child {
          margin: ($grid-gap / 2);
        }
      }
    
      @supports(display: grid) {
        display: grid;
        margin: 0;
        grid-gap: $grid-gap;
        grid-template-columns: repeat(auto-fit, minmax(#{$grid-min}, 1fr));
    
        > * {
          width: auto;
          min-width: 0;
          margin: 0;
        }
    
        > .paragraph {
          &:first-child,
          &:last-child {
            margin: 0;
          }
        }
      }
    
      .span-two {
        grid-column: span 2;
      }
    
      .span-three {
        grid-column: span 3;
      }
    
      .span-four {
        grid-column: span 4;
      }
    
      &.grid--small {
        > * {
          min-width: 10rem;
        }
    
        @supports(display: grid) {
          grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    
          > * {
            min-width: 0;
          }
        }
      }
    
      &.grid--medium {
        > * {
          min-width: 14rem;
          @include rr-break-directive(l) {
            max-width: 21%;
          }
        }
    
        @supports(display: grid) {
          grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    
          > * {
            min-width: 0;
            @include rr-break-directive(l) {
              max-width: none;
            }
          }
        }
      }
    
      &.grid--large {
        > * {
          min-width: 22rem;
          box-sizing: border-box;
        }
    
        @supports(display: grid) {
          grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    
          > * {
            min-width: 0;
          }
        }
      }
    
      &.grid--xlarge {
        display: block;
        margin-right: 0;
        margin-left: 0;
    
        > * {
          //min-width: 100%;
          margin: 0 0 2rem;
          margin-right: 0;
          margin-left: 0;
        }
    
      }
    }
    
    // Some special rules for grids in a narrowed content column
    .with-sidebar__main {
      $grid-min-against-sidebar: 18rem;
    
      .grid.grid--wider-in-sidebar-main {
        > * {
          flex-basis: $grid-min-against-sidebar;
        }
    
        @supports(display: grid) {
          grid-template-columns: repeat(auto-fit, minmax(#{$grid-min-against-sidebar}, 1fr));
        }
      }
    }
    
    // tweak teaser card meta styles when in the wide/single-col grid
    .collection.collection--teaser-card .grid.grid--xlarge .teaser,
    .grid.grid--xlarge .teaser.teaser--card {
      .content-meta,
      .event-meta {
        .taxonomy {
          display: flex;
    
          &::before {
            display: none;
          }
        }
    
        &::after {
          display: block;
          margin-top: rr-gridbase(1);
        }
      }
    }
    
    // tweak meta styles in teasers when used in collection-grids in sidebar pages
    .with-sidebar.with-sidebar--major-right {
      .with-sidebar__main {
        .collection-grid.collection-grid--major-left {
          .grid.grid--xlarge {
            .teaser {
              .content-meta,
              .event-meta {
                display: block;
                @include rr-font-compute(r, medium);
    
                .taxonomy {
                  display: block;
    
                  &::before {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
    
  • URL: /components/raw/grid/grid.scss
  • Filesystem Path: patterns/molecules/layouts/grid/grid.scss
  • Size: 3.1 KB

Title: Grid

Slab variant that allows multiple blocks to be aligned in equal-portion columns. The library has implemented 3 through 6 columns, although 4 is probably the rational maximum.