grid-template-columns, 2 minimum or auto-CodePudding

Is this possible with grid-template-columns to define 2 columns minimum of 200px or auto if the number of children is too big? I found only a way to define the number or initial column.

ul.menu {
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:auto; 
    grid-gap: 1px;
    overflow: hidden;
} 

li {
    width: 200px;
    height: 200px;
}

<ul >
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
  <li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

CodePudding user response：

Maybe you could achieve something like this with the minmax() function.

For a detailed article with lots of examples look here

CodePudding user response：

This line is important for you:

grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );

    ol.menu {
      display: grid;
      grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
      list-style-position: inside;
      padding: 0;
    } 

    li {
      border: 1px solid grey;
    }

<ol >
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>