In this Article, you will learn how to create a very very very (…) beautiful square with only HTML and the perfect language: the CSS. At the same time you will learn new techniques to code properly.
Step 1: Create a simple square in HTML with a basic css code:
In this part, We will write a div in HTML and a primary color background to him.
Here the result with the HTML and CSS codes:
Step 2: Add simple squares, apply the style to the beautiful square (and align him the on the center of the body – optional):
Second fact, we will add squares to this beautiful square, with the grid-template-columns property, got it? Let’s go, here the steps:
Adding (In the HTML part) nine divs (here, the divs is the squares) to the parent div (here, the parent div is the square which contains the nine divs).
Turn the display property to grid to active the grid-template-columns property to the parent div with this value: auto auto auto, That’s why you will watch a 3×3 square in the final result. Why 3×3, because the one “three” is the number of times the word auto has been repeated and the two three for 9 (the number of divs) divided by 3 (the number of times the word auto has been repeated).
Adding the with and the height of the parent div, turn the gap property to 1px or more (It’s the space between the internal squares) and apply a soothing background color to him.
Adding styles to the internal squares, a border-radius for example, and a soothing background color (this is important to making a difference between the background of the parent div and the internal squares, otherwise you will watch a unique bad square which have a one background color)…
Add style to the parent div.
The final instruction, and optional, add a background to the body, and align the beautiful square on the center of the body.
Do you think to the beautiful result? Scroll and watch the beauty of the minimal code.
