# CSS Battle: #2 - Carrom



In this article, I will solve a [Carrom](https://cssbattle.dev/play/2) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the [problem](https://cssbattle.dev/play/2) first.

## Problem 

We need to create the following container by using CSS Properties only:
![Simply Square](https://cssbattle.dev/targets/2.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

### HTML

First, create an HTML for this, I've used the two containers to do that. you can use [Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) as well.

<CodeTitle title="index.html" lang="html"/>
```html
<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
```


### CSS

Now let's style the containers. 

<CodeTitle title="styles.css" lang="css"/>
```css
body {
  margin: 0;
}
.box {
  display: flex;
  flex-wrap: wrap;
  column-gap: 100px;
  background: #62374e;
}
.box span {
  width: 50px;
  height: 50px;
  background: #fdc57b;
  align-self: center;
  margin: 50px;
}
```

### Codepen

%[https://codepen.io/j471n/pen/PomZXLR]

>Note: Codepen might be different from the real shape but the code is correct with 100% match

### Wrapping up
If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.