<div class="wrapper">
    <article class="flow">
      <h1>The <code>fr</code> unit</h1>
      <figure class="callout">
        <p>In this example the grid container creates a grid with three column tracks of 1fr. Change the value of the final track.</p>
      <div class="controls">
          Choose column size of third track
          <select id="switcher">
            <option value="1fr">1fr</option>
            <option value="2fr">2fr</option>
            <option value="3fr">3fr</option>
            <option value="4fr">4fr</option>
      <div class="container" id="container">
        <div class="box">Item one</div>
        <div class="box">Item two</div>
        <div class="box blue">Item three has more text </div>
        <div class="box">Item four</div>
        <div class="box">Item five</div>
:root {
  --var-col: 1fr;

.container {
  display: grid;
  grid-template-columns: 1fr 1fr var(--var-col);
  grid-template-rows: 200px auto;
  gap: 10px;
  background-color: var(--color-stroke);
  padding: 1em;
  max-width: 30rem;

select {
  min-width: unset;
.box.blue {
  background-color: var(--color-primary-x-light);
const switcher = document.getElementById("switcher");
const root = document.documentElement;

switcher.addEventListener("change", function (evt) {
  root.style.setProperty("--var-col", evt.target.value);

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.