Question

这是我想要的所有代码。但使用grid布局。这是基于float的布局


<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

我第一次尝试了这个

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

我得到了这个I don't want the squares stack on top of each other on mobile view

然后我尝试了这个 grid-template-columns: repeat(3, 1fr); 但是这次我得到了这个Why they so far from each other?

任何人都可以告诉我如何使用gird实现基于浮点的布局吗？

Answer 1

工作代码!!

我删除了width类的.square属性，并制作了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>

Answer 2

我看到有人击败了我，但由于我已经制作了这个ima，所以如果您认为这种设计更好，就把它留在这里。

* {
      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>

Answer 3

我认为代码可以说明一切。我尝试在grid-gap上将百分比分别用作padding和.container，但是在这种情况下，网格无法根据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>

不同布局的结果相同

3 个答案: