0

Here is the first code that's all I wanted. but with the grid layout. this is float based layout


<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; 
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #232323;
    }

    .square {
      padding-bottom: 30%;
      width: 30%;
      background-color: #399099;
      float: left;
      margin: 1.66%;
    }

    .content {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="header">
    <h1><span id="target">RGB</span> color game</h1>
  </div>
  <div id="manue">
    <button id="reset">New Color</button>
    <p id="massage"></p>
    <div id="lavel">
      <button id="easy">Easy</button>
      <button id="heard">Heard</button>
    </div>
  </div>
  <div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="content"></div>
  </div>

  <script src="index.pack.js"></script>
</body>

</html>
<script src="index.pack.js"></script>
</body>

</html>

This is the result all I wanted but with grid

Here is the Codepen link

I tried first this one

  max-width: 650px;
  margin: 0 auto;
  padding: 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 10px;
}```

I got this I don't want the squares stack on top of each other on mobile view

then I tried this one grid-template-columns: repeat(3, 1fr); But this time I got this Why they so far from each other?

Can anyone please tell me how can I achieve the float-based layout with gird?

Mayur
  • 4,345
  • 3
  • 26
  • 40
kabir sumn
  • 23
  • 5

3 Answers3

0

Working Code !!

I have removed width property of .square class and make the padding-bottom: 100%

<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #232323;
      display: grid;
      grid-template-columns: repeat(3, 1fr)
    }
    
    .square {
      padding-bottom: 100%;
      background-color: #399099;
      float: left;
      margin: 1.66%;
    }
    
    .content {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="header">
    <h1><span id="target">RGB</span> color game</h1>
  </div>
  <div id="manue">
    <button id="reset">New Color</button>
    <p id="massage"></p>
    <div id="lavel">
      <button id="easy">Easy</button>
      <button id="heard">Heard</button>
    </div>
  </div>
  <div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="content"></div>
  </div>

  <script src="index.pack.js"></script>
</body>

</html>
<script src="index.pack.js"></script>
</body>

</html>
solanki...
  • 4,982
  • 2
  • 27
  • 29
0

I saw that someone beat me to an answer but since I already made this ima leave it here incase you think this design is nicer.

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #232323;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border:1px solid black;
    }
    .square {
      background-color: #399099;
      margin:0 auto;
      padding:30%;
      border:1px solid black;
      width:100%;
    }
    .content {
      clear: both;
    }
<div class="header">
    <h1><span id="target">RGB</span> color game</h1>
  </div>
  <div id="manue">
    <button id="reset">New Color</button>
    <p id="massage"></p>
    <div id="lavel">
      <button id="easy">Easy</button>
      <button id="heard">Heard</button>
    </div>
  </div>
  <div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="content"></div>
  </div>
Blomqen
  • 61
  • 1
  • 6
0

I think the code speaks for itself. I tried using percentage as grid-gap and padding on .container but grid can't calculate height in that case according to this post.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 600px;
  margin: 0.5rem auto;
  background-color: #232323;

  /* NEW CODE */
  display: grid;
  padding: 0.5rem;
  padding-bottom: 0px; /* Honestly don't know why I needed this */
  grid-gap: 0.5rem;
  grid-template-columns: 1fr 1fr 1fr;
}

.square {
  padding-top: 100%; /* ASPECT RATIO 1:1 */
  background-color: #399099;
}
<div class="header">
  <h1><span id="target">RGB</span> color game</h1>
</div>
<div id="manue">
  <button id="reset">New Color</button>
  <p id="massage"></p>
  <div id="lavel">
    <button id="easy">Easy</button>
    <button id="heard">Hard</button>
  </div>
</div>
<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="content"></div>
</div>
Rickard Elimää
  • 7,107
  • 3
  • 14
  • 30