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

user_19400287 0
Viewed 61
<!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 class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></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

css html
2 Answers

Put all your divs inside a container

<div class='container'>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></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 class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
</div>

user_172354310 
         <!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 class="container">
    <span class="circles"></span>
    <span class="circles"></span>
    <span class="circles"></span>
    <span class="circles"></span>
  </div>

  </body>

  </html>
user_97816060
Related