title: CSS Grid: how do I use minmax() while naming lines?
body: <p>I'm trying to understand how to use minmax() while also naming lines in a grid</p>
  <p>let's say I create a grid with 12 divs and I divide them in 4 column and 3 rows. I want column and rows to be at least 200px and max 400px or other sizes I specified in minmax. I also want to name my lines.</p>
  <p>I tried writing this</p>
  <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>.naming-lines {
              display:grid;
              grid-template-columns: [inizio-colonna] minmax(200px, 400px) [colonna-2] minmax(300px, 400px) [colonna-3] minmax(400px, 600px) [fine-colonna];
              grid-template-rows: repeat([row-start], minmax(200px, 400px) [row-end]);
          }
  
          
  .container {background-color: #fff;
              font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
              font-size: 16px;
              display:grid;
              max-width: 2000px;
              border-color:red;
              border-style: solid;}
  
  .box {
          background-color: aliceblue; 
          border-style: dashed; 
          border-color: blanchedalmond;
          text-align: center;
          font-size: larger;
  }
          
          </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Naming lines&lt;/h1&gt;
  &lt;div class="container naming-lines"&gt;
          
      &lt;div class="box box1"&gt;I'm box 1&lt;/div&gt;
      &lt;div class="box box2"&gt;I'm box 2&lt;/div&gt;
      &lt;div class="box box3"&gt;I'm box 3&lt;/div&gt;
      &lt;div class="box box4"&gt;I'm box 4&lt;/div&gt;
      &lt;div class="box box5"&gt;I'm box 5.&lt;/div&gt;
      &lt;div class="box box6"&gt;I'm box 6.&lt;/div&gt;
      &lt;div class="box box7"&gt;I'm box 7.&lt;/div&gt;
      &lt;div class="box box8"&gt;I'm box 8.&lt;/div&gt;
      &lt;div class="box box9"&gt;I'm box 9.&lt;/div&gt;
      &lt;div class="box box10"&gt;I'm box 10.&lt;/div&gt;
      &lt;div class="box box11"&gt;I'm box 11.&lt;/div&gt;
      &lt;div class="box box12"&gt;I'm box 12&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>it doesn't work. I don't understand how minmax and naming lines work together.</p>