CSS flex and grid using Cssbattles challange.

In this article, we'd solve a CSS battle challenge [click here for this exact challenge].

To solve this challenge, we'd split the process in 3 stages.

1 the background

The colours to be used in here are already provided, so our duty is to use them appropriately. For this design, our background colour is "#DA30D4". To handle the background, we'd use the "body" tag to handle the background.
We'd be using flex to make sure that everything is centred, both vertically and horizontally.

body{
    background-color: #DA30D4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }

Add the above styles in the styles tag

2 Create a wrapper that holds the four circles.

In this section, go ahead and add a class name of 'wrapper' in the existing DIV, then 4 children

's within the wrapper DIV.
In this section, we'd use display of grid to efficiently wrap our circles into the columns by using the "grid-template-column" CSS property. There is no need to use the width and height property in this section, all we'd be doing is ensure that its children items are centred. Vertically and Horizontally. Then, essentially, add a gap of 20px. This will ensure that the space here is between the columns and the rows is 20px.
Here is the snippet for this section

<div class='wrapper'>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
</div>
<style>
  body{
    background-color: #DA30D4;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrapper{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr ;
    gap: 20px;
  }
  .circle{
    background-color: #0C0C49;
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }
</style>

copy and paste the section for this needed part

3 the last part of this is the box at the outermost layer. Like, the top level.

For this section, set the position to absolute, this will permit the box to sit over the wrapper as the items have all been assigned to be centred by the body. Change the colour as required, and you've got a catch in your hook

<div class='wrapper'>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
  <div class='circle'></div>
</div>
<div class='box'></div>
<style>
  body{
    background-color: #DA30D4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  .wrapper{
    width: 100px;
    height: 220px;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr ;
    padding: 1px;
    gap: 20px;
  }
  .circle{
    background-color: #0C0C49;
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }
  .box {
    width: 120px;
    height: 120px;
     background-color: #DA30D4;
    position: absolute;
  } 
</style>

Here is the result from this snippet

This is the end of this article.

If you have this final snippets posted in, you are ready to hit the ** submit and smile at your 100% **

You can also choose to watch me code this live on youtube here
Also do well to drop a like and subscribe, here and on youtube.
You're done.
Challenge solved and defeated.

Stay tuned for more articles like this, as we go through and debug some bugs and some errors in our day-to-day development. Both simple and complex bugs.
Cheers!!😊