title: Problem to fill cards in TailWindCSS on large displays and less cards
body: <p>please, I have grid which looks fine on mobile and desktop. But on large displays I want 4 maximum columns. But currently I have only 3 tabs. It's possible please grow these 3 columns fill to <code>container</code> class width in <strong>TailWindCSS</strong>?</p>
  <p>You know, it doesnt' look nice.</p>
  <p>Otherwise, I can use flexbox of course. This I tried as well but then I need last card align to left side an all other cards must be centers which is impossible in flexbox.</p>
  <p>3 requirements:</p>
  <ol>
  <li>Max 4 columns in one row (no problem - solved)</li>
  <li>Fill less than 4 columns in large display to full width of container</li>
  <li>In small display (640px for width which means any mobile in landscape) must show 2 cards (not just one)</li>
  </ol>
  <p>Problem 1 and 3 is solved. But about problem 2 please? It's possible solve it with tailwind CSS or I need own special classes?</p>
  <p>Here is example of my code with one card:</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>@tailwind base;
  
  body {
    @apply bg-gray-900;
  }
  
  @tailwind components;
  @tailwind utilities;
  
  @layer components {
    .main {
      @apply min-h-screen mx-auto;
    }
  
    .card-container {
      @apply grid pt-3 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
    }
  
    .card {
      @apply rounded-lg overflow-hidden bg-gray-100 text-black shadow md:shadow-xl lg:shadow-2xl;
    }
  
    .site-header {
      @apply text-white text-center text-2xl font-bold p-10 bg-white bg-opacity-20 rounded-md;
    }
  
    .card-image {
      /*@apply object-cover max-h-96 w-max filter grayscale;*/
      @apply object-cover w-96 h-96;
    }
  
    .card-header {
      @apply flex m-2 font-semibold;
    }
  
    .card-title {
      @apply mt-3 text-lg font-medium uppercase text-center;
    }
  
    .card-description {
      @apply px-5 h-80 overflow-y-auto;
    }
  
    .card-labels {
      @apply bottom-0 flex space-x-1 m-2;
    }
  
    .card-labels-item {
      @apply text-center text-xs font-semibold px-3 py-1 rounded-md border-2 border-gray-800;
    }
  
    .btn-vote {
      @apply inline-flex items-center border-2 border-black w-20 rounded-md mr-2 px-1;
    }
  }
  
  .thumbup {
    background: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'&gt;&lt;path d='M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z' /&gt;&lt;/svg&gt;")
      left center no-repeat;
  }
  
  .thumbdown {
    background: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'&gt;&lt;path d='M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z' /&gt;&lt;/svg&gt;")
      left center no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main class="container main"&gt;
    &lt;section class="p-3"&gt;
      &lt;h2 class="site-header"&gt;A-Z Planet&lt;/h2&gt;
      &lt;div class="card-container"&gt;
        &lt;!-- First card --&gt;
        &lt;article class="card"&gt;
          &lt;figure&gt;
            &lt;img class="card-image" src="https://zrebec.sk/assets/alpaka.jpg" alt="" /&gt;
          &lt;/figure&gt;
          &lt;header class="card-header h-8"&gt;
            &lt;a href="#" class="btn-vote"&gt;
              &lt;div class="h4 w-4 mr-1 thumbup"&gt;&amp;nbsp;&lt;/div&gt;
              186
            &lt;/a&gt;
            &lt;a href="#" class="btn-vote"&gt;
              &lt;div class="h-4 w-4 mr-1 thumbdown"&gt;&amp;nbsp;&lt;/div&gt;
              12
            &lt;/a&gt;
            &lt;div class="flex-grow font-bold w-100 text-right"&gt;84%&lt;/div&gt;
          &lt;/header&gt;
          &lt;h2 class="card-title"&gt;Alpaca&lt;/h2&gt;
          &lt;p class="card-description"&gt;The alpaca is a camelid mammal native to South America. Closely related to its larger cousin, the llama, the two species are able to interbreed. Yarn spun from alpaca wool is popular for warm, soft sweaters, socks, mittens, and hats, making the fur of these domesticated animals a valuable commodity.&lt;/p&gt;
          &lt;footer class="card-labels"&gt;
            &lt;div class="card-labels-item text-white bg-green-500"&gt;White soft fur&lt;/div&gt;
            &lt;div class="card-labels-item text-black bg-yellow-500"&gt;Cute but not domestic&lt;/div&gt;
            &lt;div class="card-labels-item text-black bg-red-500"&gt;Sometimes strange&lt;/div&gt;
          &lt;/footer&gt;
        &lt;/article&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Of course, you can look on my whole code on TailwindCSS Playground. Thanks</p>
  <p>Best regards and thanks for any advice.</p>
  <p>[Here is my code on TailWindCSS Playground][1]</p>