title: CSS/Bootstrap 5 by 5 tile grid
body: <p>I'm trying to create a 5x5 tile grid/field in css and bootstrap. However I have a few issues, when resizing my grid the blocks look very high on mobile and it doesn't look as fancy as when it was bigger. Also when one tile has text or content inside it will stretch and make the entire row bigger. Does anyone have an idea how I can improve this? This is what I currently have (check on full page aswell)
  <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>#mines-field {
    max-height: 100%;
    max-width: 100%;
    height: 1000px;
    width: 1200px;
  }
  
  .mines-card {
    flex: 0 1 calc(20% - 8px);
    margin: 4px;
    background-color: rgb(92, 92, 214);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"&gt;
  
    &lt;title&gt;Hello, world!&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;div class="card bg-dark" id="mines-field"&gt;
            &lt;div class="card-body d-flex flex-wrap flex-row"&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;
                &lt;h1&gt;test&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
              &lt;div class="mines-card text-center d-flex justify-content-center"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>