<div class="container">
  <ul class="cards">
    <li><h2>Card One</h2>
      <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </p>
    </li>
    <li><h2>Card Two</h2>
      <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi.</p>
    </li>
    <li><h2>Card Three</h2>
      <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
    </li>
  </ul>
</div>

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 40px;
  font: 1.2em 'Open Sans', sans-serif;
  background-color: #fff;
}

h1, h2, h3 {
  font-family: 'Averia Serif Libre', cursive;
}

.container {
  background-color: #ddddda;
  height: 720px;
  width: 1280px;
  padding: 120px 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  float: left;
  margin: 0 1%;
  padding: 20px;
  width: 30%;
  background-color: #fff;
}

@supports (display: grid) {
  ul {
    display: grid;
    gap: 2%;
  grid-template-columns: 1fr 1fr 1fr;
  }
  
  li {
    width: auto;
    margin: 0;
  }
}