<p> Replace the div with your component</p>

<h2>Tile Grid Small</h2>
<section class="tile-grid-sm">
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
</section>

<h2>Tile Grid Medium</h2>
<section class="tile-grid-md">
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
</section>
<p> Replace the div with your component</p>

<h2>Tile Grid Small</h2>
<section class="tile-grid-sm">
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
</section>

<h2>Tile Grid Medium</h2>
<section class="tile-grid-md">
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
</section>
/* No context defined. */
  • Content:
    .tile-grid-sm,
    .tile-grid-md,
    .tile-grid-alternating-1-4 {
      display: grid;
      width: 100%;
      grid-gap: $spacer-sm;
    }
    
    .tile-grid-alternating-1-4 {
      grid-gap: $spacer-xxl $spacer-sm;
    }
    
    .tile-grid-sm {
      grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
    }
    
    .tile-grid-md {
      grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
    }
    
    @media screen and (min-width: $grid-breakpoint-md-lg) {
      .tile-grid-alternating-1-4 {
        grid-template-columns: repeat(2, minmax(6rem, 1fr));
    
        :nth-child(5n+1) {
          grid-column: span 2;
        }
      }
    }
    
  • URL: /components/raw/tile-layout/_tile-layout.scss
  • Filesystem Path: components/02-layouts/component-layouts/tile-layout/_tile-layout.scss
  • Size: 568 Bytes
  • Handle: @tile-layout
  • Preview:
  • Filesystem Path: components/02-layouts/component-layouts/tile-layout/tile-layout.html

No notes defined.