<h1>The flexible sizing showdown</h1>
<div class="grid-a">
  <div class="box fr">Do we still like boxes?</div>
  <div class="box fr">Do we still like boxes?</div>
  <div class="box fr">Do we still like boxes?</div>
</div>

<div class="grid-b">
  <div class="box auto">Do we still like boxes?</div>
  <div class="box auto">Do we still like boxes?</div>
  <div class="box auto">Do we still like boxes?</div>
</div>

<div class="grid-c">
  <div class="box auto">Do we still like boxes?</div>
  <div class="box fr">Do we still like boxes?</div>
  <div class="box auto">Do we still like boxes?</div>
</div>

<div class="grid-d">
  <div class="box fr">Do we still like boxes?</div>
  <div class="box auto">Do we still like boxes?</div>
  <div class="box fr">Do we still like boxes?</div>
</div>

<div class="grid-e">
  <div class="box fr">Do we still like boxes?</div>
  <div class="box auto">Do we still like boxes?</div>
  <div class="box fit">Do we still like boxes?</div>
</div>

<div class="grid-f">
  <div class="box fit">Do we still like boxes?</div>
  <div class="box auto">Do we still like boxes?</div>
  <div class="box minmax">Do we still like boxes?</div>
</div>

<div class="grid-g">
  <div class="box fr">Do we still like boxes?</div>
  <div class="box auto">Do we still like boxes?</div>
  <div class="box minmax">Do we still like boxes?</div>
</div>

<div class="grid-h">
  <div class="box fit">Do we still like boxes?</div>
  <div class="box minmax">Do we still like boxes?</div>
  <div class="box fixed">Do we still like boxes?</div>
</div>

<div class="grid-i">
  <div class="box fit">Do we still like boxes?</div>
  <div class="box max">Do we still like boxes?</div>
  <div class="box auto">Do we still like boxes?</div>
</div>
[class^='grid'] {
  display: grid;
  margin-bottom: 1em;

  .fr { background-color: limegreen }
  .auto { background-color: skyblue }
  .minmax { background-color: gold }
  .fit { background-color: coral }
  .fixed { background-color: violet }
  .max { background-color: silver }
}

.grid-a { grid-template-columns: 1fr 2fr 1fr }
.grid-b { grid-template-columns: auto auto auto }
.grid-c { grid-template-columns: auto 1fr auto }
.grid-d { grid-template-columns: 1fr auto 1fr }
.grid-e { grid-template-columns: 1fr auto fit-content(200px) }
.grid-f { grid-template-columns: fit-content(200px) auto minmax(200px, 400px) }
.grid-g { grid-template-columns: 1fr auto minmax(200px, 400px) }
.grid-h { grid-template-columns: fit-content(200px) minmax(200px, 400px) 400px }
.grid-i { grid-template-columns: fit-content(200px) max-content auto }

// General styles
* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  height: 100%;
  font-size: calc(1em + 0.75vw);
}

body {
  height: 100%;
  padding: 1em;
}

div {
  box-sizing: border-box;
}

h1 {
  margin-bottom: 0.5em;
}

.box {
  border: 1px solid;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.