# Tile Layout

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- Content:
  `

      .tile-grid-sm,
      .tile-grid-md,
      .tile-grid-alternating-1-4 {
        @extend %list-unstyled;

        display: grid;
        grid-gap: $spacer-sm;
        width: 100%;
      }

      .tile-grid-alternating-1-4 {
        grid-gap: $spacer-xxl $spacer-sm;
      }

      .tile-grid-sm {
        grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 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: 608 Bytes

- Handle: @tile-layout
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/02-layouts/component-layouts/tile-layout/tile-layout.html

No notes defined.