<aside>
  <div></div>
</aside>
<main>
  <div>minmax(auto, 70ch)</div>
  <h1>CSS is Awesome</h1>
  <p>An interesting use case for minmax() is using it to create an article layout. For this example, the content is horizontally centered.</p>
</main>
<aside>
  <div></div>
</aside>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #f7f7f7;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);
}

main {
  background-color: #fefefe;
  padding: 0 2rem 2rem;
}

aside > div {
  background-color: #09f;
  color: #fff;
  padding: 10px;
  text-align: center;
}

main > div {
  background-color: #f36;
  padding: 10px;
  color: #fff;
  margin-left: -2rem;
  margin-right: -2rem;
  text-align: center;
}

aside > div {
  min-height: 38px;
}

p {
  line-height: 1.625;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.