色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

我如何將4個盒子放在網格容器的中心，這樣它們的大小就相等了？

CSS
阮建安2年前7瀏覽0評論

我試著用邊距將它們居中，但是仍然沒有解決調整大小的問題。 我需要四個盒子放在紅色容器的中間。 現在，盒子和它們的容器大小不等。 容器變得比盒子大或小。 我需要盒子和容器之間以及盒子本身之間留有空間。

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

* {
  margin: 0;
  padding: 0;
}



.container {
  display: grid;
  width: 50%;
  background: Crimson;
  margin: 40% auto;
  gap: 4px;
  grid-template-areas: "first second" "third  forth";
  grid-template: 48% 48% / 48% 48%;
  border-radius: 5px;
}

.container:after {
  content: "";
  display: grid;
  padding-bottom: 100%;
}

.box {
  box-shadow: 5px 5px 4px #a11d33;
  background: #ED365B;
  border-radius: 5px;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica;
  transition-duration: 0.4s;
  cursor: pointer;
}

.box:hover {
  background: #ff4d6d;
  color: #800f2f;
}

.box:after {
  content: "";
  display: grid;
  padding-bottom: 44%;
}

.first {
  grid-area: "first";
}

.second {
  grid-area: "second";
}

.third {
  grid-area: "third";
}

.forth {
  grid-area: "forth";
}
   
**HTML**

<!DOCTYPE html>
<html>

<head>
  <title>Index</title>
  <link rel="stylesheet" href="myCSS.css">
</head>

<body>
  <div class="container">

    <div class="box first">
      First
    </div>
    <div class="box second">
      Second
    </div>
    <div class="box third">
      Third
    </div>
    <div class="box forth">
      Forth
    </div>

  </div>
</body>

</html>