How to place 4 circles inside a square box in css?-CodePudding

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circles {
  height: 150px;
  width: 150px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
</style>
</head>
<body>

  <h1> </h1>
  <span ></span>
  <span ></span>
  <span ></span>
  <span ></span>
</div>

</body>
</html>

I am trying to make 2 circles at the top and 2 at the bottom using css. All 4 circles needs to be inside a square box. Also adding some colors to the circles. Any ideas? this is what i have so far

CodePudding user response：

Put all your divs inside a container

<div class='container'>
  <span ></span>
  <span ></span>
  <span ></span>
  <span ></span>
</div>

Set the display of the container to grid and let it have 2 columns

.container {
  display:grid;
  grid-template-columns: 150px 150px;
  padding: 20px;
  background-color: red;
  width: min-content;
}

Setting the width to min-content resizes the container from spanning the full width of the screen to only having the minimum width

Refer to the below snippet for complete solution

.circles {
  height: 150px;
  width: 150px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.container {
  display: grid;
  grid-template-columns: 150px 150px;
  padding: 20px;
  background-color: red;
  width: min-content;
}

<h1> </h1>
<div class='container'>
  <span ></span>
  <span ></span>
  <span ></span>
  <span ></span>
</div>

CodePudding user response：

         <!DOCTYPE html>
          <html>

           <head>
          <meta name="viewport" content="width=device-width, initial- 
           scale=1">
<style>
    .circles {
        height: 150px;
        width: 150px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
    }

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;


    }
   </style>
 </head>

 <body>

 <div >
    <span ></span>
    <span ></span>
    <span ></span>
    <span ></span>
  </div>

  </body>

  </html>