Vitruvius Grid

by iamjpg

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@moxiworks/project-vitruvius@latest/build/project-vitruvius.min.css">
<!-- Six columns -->
<div class="v-flex-wrap">
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 bg-moxi-green text-center">1</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 bg-moxi-green-light text-center">2</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 bg-moxi-green text-center">3</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 bg-moxi-green-light text-center">4</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 bg-moxi-green text-center">5</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 bg-moxi-green-light text-center">6</div>
</div>

<div class="v-flex-wrap">
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 bg-moxi-green text-center">7</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 bg-moxi-green-light text-center">8</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 bg-moxi-green text-center">9</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 bg-moxi-green-light text-center">10</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 bg-moxi-green text-center">11</div>
  <div class="v-flex-item w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 bg-moxi-green-light text-center">12</div>
</div>