title: How to resize CSS Grid areas to stacked on small screens?
body: <p>Say, I have the following HTML with some grid CSS. What would be a good way to have them stacked onto each other on smaller screens (e.g. 360x720)?</p>
  <p>For some reason I can't come to think of a good way on what I think is they line</p>
  <blockquote>
  <p>grid-template-columns: minmax(min(0, 100%), 1fr)) 1fr 1fr 1fr;</p>
  </blockquote>
  <p>likely with a media query.</p>
  <p>I have been reading <a href="https://web.dev/one-line-layouts/" rel="nofollow noreferrer">https://web.dev/one-line-layouts/</a>, <a href="https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/" rel="nofollow noreferrer">https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/</a> and some others on how it could be done, but for a reason or another it eludes me.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;    
      &lt;title&gt;Grid test&lt;/title&gt;    
      &lt;style&gt;
          .grid-container
          {
              display: grid;
              grid-template-columns: minmax(min(0, 100%), 1fr)) 1fr 1fr 1fr;
              grid-template-rows: repeat(3, 1fr);
              gap: 0px 0px;
              grid-template-areas:
                  &quot;Photo Intro Intro Intro&quot;
                  &quot;Left Left Right Right&quot;
                  &quot;Footer Footer Footer Footer&quot;;
          }
          
          .Photo { grid-area: Photo; }
          .Intro { grid-area: Intro; }        
          .Left { grid-area: Left; }
          .Right { grid-area: Right; }
          .Footer { grid-area: Footer; }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class=&quot;grid-container&quot;&gt;
    &lt;div class=&quot;Photo&quot;&gt;
          &lt;img width=&quot;80%&quot; src=&quot;x.jpg&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;Intro&quot;&gt;
      &lt;h1&gt;Intro text&lt;/h1&gt;
      &lt;section&gt;
          &lt;p&gt;Text.&lt;/p&gt;
      &lt;/section&gt;
      &lt;/div&gt;  
    &lt;div class=&quot;Left&quot;&gt;&lt;h2&gt;Left header&lt;/h2&gt;&lt;p&gt;Left text&lt;/p&gt;&lt;/div&gt;
    &lt;div class=&quot;Right&quot;&gt;&lt;h2&gt;Right header&lt;/h2&gt;&lt;p&gt;Right text&lt;/p&gt;&lt;/div&gt;
    &lt;div class=&quot;Footer&quot;&gt;&lt;p&gt;Footer stuff&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>