Science Museum Group: Web Design System

Grid: Default

No notes defined.

<div class="o-container">
    <p>Generic container</p>
    <div class="o-grid o-grid--2-col">
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
    </div>
    <div class="o-grid o-grid--4-col">
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
    </div>
    <p>All grids stack on small screen, different breakpoints can be defined for medium sizes</p>
    <div class="o-grid o-grid--6-col o-grid--medium-3-col">
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
        <div class="o-grid__item">
            <div class="c-panel ">
                <h3>grid item</h3>
            </div>
        </div>
    </div>
</div>
 
<div class="o-container">
  <p>Generic container</p>
  <div class="o-grid o-grid--2-col">
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
  </div>
  <div class="o-grid o-grid--4-col">
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
  </div>
  <p>All grids stack on small screen, different breakpoints can be defined for medium sizes</p>
  <div class="o-grid o-grid--6-col o-grid--medium-3-col">
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
    <div class="o-grid__item">
      {{> @panel }}
    </div>
  </div>
</div>