Help - About CSS Grid

Hello everybody.

I’m stuck with Css Grid.

My doubt is:

If I create 3 columns for example (grid-template-columns: repeat(3, 50px).
How can I identify each column or row in html to put an element inside.

I dont know how can I put an element inside that column or row.

I hope to be clear.

Many Thanks. Simon

Create a class to hold your grid with display set to grid:

.grid {
     display: grid;
     grid-template-columns: repeat(3, 50px);

Now apply this class to a div and add elements inside it like you normally do:

<div class="grid">
    <h3>Heading 3</h3>

Above code will get displayed something like this:

Note that once you add more than 3 nested elements into your grid div, you will find them getting arranged row by row in threes.

For example, consider the code block below:

<div class="grid">

will produce this output:

have you already learned about grid-template-areas and grid-area? they are for that

Thanks Abhilashini!! You are amazing, very clear.

1 Like