DEV Community

LilaDoc
LilaDoc

Posted on

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>

Enter fullscreen mode Exit fullscreen mode
.Ocean{

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

    }
Enter fullscreen mode Exit fullscreen mode

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

That's how you can represent it:

Image description

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;
    }
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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

Top comments (3)

Collapse
 
thomasbnt profile image
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!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
 
liladoc profile image
LilaDoc

Thank you for the tips!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.