---
layout: cypress
title: Grid/Grid
breakpoints:
- name: mobile
  visibility: mobile
  count: 2
  suffix: '-mobile'
- name: tablet
  visibility: tablet-only
  count: 4
  suffix: '-tablet'
- name: desktop
  visibility: desktop-only
  count: 8
  suffix: '-desktop'
- name: widescreen
  visibility: widescreen-only
  count: 12
  suffix: '-widescreen'
- name: fullhd
  visibility: fullhd
  count: 16
  suffix: '-fullhd'
---

<script src="{{ site.url }}/lib/playground.js"></script>

<section style="padding: 3rem;">
  {% for breakpoint in page.breakpoints %}
    <p style="display: none;" class="block is-block-{{ breakpoint.visibility }}">
      Current breakpoint: <strong>{{ breakpoint.name }}</strong>
    </p>
  {% endfor %}

  <div style="display: flex; flex-wrap: wrap;">
    {% for breakpoint in page.breakpoints %}
      <div style="margin: 0 1.5em 1.5em 0; position: relative; width: 180px;">
        <p style="border: 2px solid hsl(153, 53%,  53%); border-radius: 1em; pointer-events: none; display: none; position: absolute; left: -1em; right: -1em; top: -1em; bottom: -1em;" class="has-background-success-light is-block-{{ breakpoint.visibility }}"></p>
        <div style="position: relative;">
          <p style="font-size: 0.75em"><strong>{{ breakpoint.count }}</strong> columns on {{ breakpoint.name }}</p>
          <input id="columns" class="jsColumns" type="range" min="1" max="16" value="{{ breakpoint.count }}" data-suffix="{{ breakpoint.suffix }}">
        </div>
      </div>
    {% endfor %}
  </div>

  <div id="grid" class="grid">
    <div class="cell">#1</div>
    <div class="cell">#2</div>
    <div class="cell">#3</div>
    <div class="cell">#4</div>
    <div class="cell">#5</div>
    <div class="cell">#6</div>
    <div class="cell">#7</div>
    <div class="cell">#8</div>
    <div class="cell">#9</div>
    <div class="cell">#10</div>
    <div class="cell">#11</div>
    <div class="cell">#12</div>
    <div class="cell">#13</div>
    <div class="cell">#14</div>
    <div class="cell">#15</div>
    <div class="cell">#16</div>
    <div class="cell">#17</div>
    <div class="cell">#18</div>
    <div class="cell">#19</div>
    <div class="cell">#20</div>
  </div>
</section>