<main>
      <div class="sheep">🐑 Lisa</div>
      <div class="sheep">🐑 Bonnie</div>
      <div class="cow">🐄 Olaf</div>
      <div class="sheep">🐑 Jenn</div>
      <div class="cow">🐄 Debra</div>
      <div class="sheep">🐑 Christoph</div>
      <div class="cow">🐄 Tristan</div>
      <div class="sheep">🐑 Alfonso</div>
      <div class="sheep">🐑 Romaine</div>
      <div class="sheep">🐑 Greta</div>
      <div class="cow">🐄 Kenny</div>
      <div class="sheep">🐑 Max</div>
      <div class="sheep">🐑 Joseph</div>
      <div class="sheep">🐑 Juan</div>
      <div class="cow">🐄 Ben</div>
      <div class="sheep">🐑 Brown</div>
      <div class="sheep">🐑 Ali</div>
      <div class="cow">🐄 Bob</div>
      <div class="cow">🐄 Tristan</div>
      <div class="cow">🐄 Sarah</div>
    </main>
main {
  display: grid;
  grid-auto-flow: dense;
}

.sheep { grid-column: 1; }

.cow { grid-column: 2; }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.