Help - About CSS Grid

HTML-CSS
#1

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

#2

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

<style>
.grid {
     display: grid;
     grid-template-columns: repeat(3, 50px);
}
</style>

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

<div class="grid">
    <p>Paragraph</p>
    <div>Div</div>
    <h3>Heading 3</h3>
</div>

Above code will get displayed something like this:
image

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">
    <p>1</p>
    <p>2</p>
    <p>3</p> 
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
</div>

will produce this output:
image

#3

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

#4

Thanks Abhilashini!! You are amazing, very clear.

1 Like