title: CSS Grid Pre Horizontal Scroll
body: <h1>Question</h1>
  <p>I want to have a <code>&lt;pre&gt;</code> code block in a grid layout.</p>
  <p>This should be responsive. When the space is to small, it should be able to scroll horizontal.</p>
  <h1>What I did</h1>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          grid-template-rows: auto;
          grid-template-areas: "h h h h h h h h h h h h"
                               ". a a a a a a a a a a ."
                               "f f f f f f f f f f f f"
  }
  main{
          grid-area: a;
        }
  pre{
          padding: 1em;
          overflow-x: scroll;
          background: #454649;
          color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;main&gt;
      &lt;pre&gt;&lt;code&gt;Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2&lt;/code&gt;&lt;/pre&gt;
    &lt;/main&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <h1>What it looks like:</h1>
  <p><img src="https://i.stack.imgur.com/jROVe.png" alt="Picture: What it looks like" /></p>
  <h1>What I want</h1>
  <p>It should be responsive and should be inside of the <code>grid-area: a</code>.</p>
  <p><img src="https://i.stack.imgur.com/OfyvC.png" alt="Picture: What I want" /></p>