<article role="main">
  <aside>
    <p>
      The sidebar is 1fr.
    </p>
  </aside>
  <div class="content">
    <h1>
      A grid layout
    </h1>
    <p>
      The main content area is 3fr.
    </p>
    <p>
      Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
    </p>
    <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>
  </div>
</article>
body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 0;
  padding: 1em;
}

* {
  box-sizing: border-box;
}

article {
  max-width: 940px;
  padding: 10px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

.content {
  color: #ccc;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 10px;
}

aside {
  color: #ccc;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.