A little magic with GRID.

My first website was simple. A title, two links, and some text for the description. Let's be honest, it was quite unpleasant.
For the second version, I pretty much used the same components. So what changed?

Grid’s magic!

Question: What is grid?

Grid enables easy organization and customization of website elements. Basically, it’s building a map and putting elements on it.

How to use it?

First, you define columns, rows, and their dimensions.

Let’s say we build a div that we will call ocean. And that we want to put a ship in the ocean.

<div class="Ocean">
        <div class="Ship"></div> 
    </div>

.Ocean{

    display: grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:100px 100px 100px;
    width: 300px;
    background-color: aqua;

    }

Here you have built 3 columns of 100px and 3 rows of 100px.

That's how you can represent it:

You determine where you want to put your item.

For example, if I want to ship the second row of the second column, I say “ Please grid, put my cross between the second and the third vertical lines. And between the second and the third horizontal lines.”

.Ship {
        grid-column:2/2;
        grid-row: 2/2;
    }

Your ship will be between the second and the third vertical lines. So, in the second column.

Your ship will be between the second and the third horizontal lines. So on the second raw.

And that’s it! I hope that it was clear enough.

Comments

[Thomas Bnt]

Hello cool post about grid !

Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');

[LilaDoc]

Thank you for the tips!