Grid

<main class="main-wrapper">
    <div class="grid -responsive">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</main>
<main class="main-wrapper">
  <div class="grid -responsive">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</main>
/* No context defined. */
  • Content:
    .grid {
      display: grid;
    }
    .grid.-responsive {
      place-items: center;
    }
    @media print, screen and (min-width:48em) {
      .grid.-responsive {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        grid-auto-flow: row;
        grid-row-gap: 1.5rem;
      }
    }
    @media print, screen and (max-width:47.96875em) {
      .grid.-responsive {
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
        grid-auto-flow: row;
      }
    }
    .grid .grid-item {
      width: 6rem;
      height: 6rem;
      background-color: #425eec;
    }
  • URL: /components/raw/grid/style.css
  • Filesystem Path: src/components/6-layout/grid/style.css
  • Size: 522 Bytes

No notes defined.