0

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) 

#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);
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="card bg-dark" id="mines-field">
          <div class="card-body d-flex flex-wrap flex-row">
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center">
              <h1>test</h1>
            </div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
            <div class="mines-card text-center d-flex justify-content-center"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <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"></script>
</body>

</html>
sharpness
  • 125
  • 2
  • 9
  • 1, your cards go tall on mobile because your grids are always set to take `20% - 8px` no matter the screen size. Solution: Use Bootstrap's grid system here to have less cards in a single line on phone view, and then move up from there. Or you could write a custom media query. 2, your individual grid item breaks on content because there's no fixed width. More content = more width, hence the break. Solution: Add a custom max-width, or again use the grid system of Bootstrap. – Siddharth Bhansali Nov 17 '21 at 15:54
  • @SiddharthBhansali I don't want less cards per row, it should always be 5x5 no matter the screen size. So what I want can be achievable by just using bootstrap rows and cols? – sharpness Nov 17 '21 at 16:38
  • If you want 5 cards always then you'll always get the current output, unless you add a max-height to it. Bootstrap `row`/`col` will be meaning-less here. – Siddharth Bhansali Nov 17 '21 at 16:55
  • See if [this](https://stackoverflow.com/questions/46548987/a-grid-layout-with-responsive-squares) helps. – Rob Moll Nov 17 '21 at 17:38

0 Answers0