title: How to center a grid of divs?
body: <p>To describe the problem in details I'll have to make a few assumptions:</p>
  
  <ol>
  <li>I have a list of items, which length is unknown (it can be 1, 2 or even 50)</li>
  <li>I want to display them in a grid - the items count in a row is unknown (determined by user's display resolution). </li>
  <li>Every item's width is the same and is fixed to let's say 250px.</li>
  <li>Items spacing should be determined by display resolution or the container's width should be shrunk.</li>
  <li>I <strong>don't</strong> want to use JS.</li>
  </ol>
  
  <p>You can see exactly what I want to do at <a href="http://foodgawker.com/" rel="nofollow noreferrer">FoodGawker</a>. I'm using 2 monitors with different resolutions. When drag and drop my browser from one to another it just puts more items in a row, but everything is still centered and symmetrical. It works also with JS disabled.</p>
  
  <p>So I know it's possible, what I don't know is how to do it.</p>
  
  <p>I tried many variations of float:, display:, etc, but couldn't make it work.</p>
  
  <p>The code below is the closest to what I want - works fine for 2 inner divs, but for many it's no longer centered. Any ideas?</p>
  
  <pre><code>.center_wrapper {
      background: grey;
      padding: 10px;
      text-align: left;
      overflow: hidden; 
      display:inline-block;
  }
  
  .cards_wrapper {
      background: red;
      overflow: hidden; 
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      width: 90%;
  
  }
  .card {
      background: blue;
      width: 250px;
      height: 250px;
      margin: auto 20px;
      display:inline;
  }
  
  
  &lt;div class="cards_wrapper"&gt;
      &lt;div class="center_wrapper"&gt;
          &lt;div class="card"&gt;
              &lt;img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png"&gt;
          &lt;/div&gt;
          &lt;div class="card"&gt;
              &lt;img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/oPTm4.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/NmrsO.jpg" alt="for 10"></p>