How exactly does the grid area work?

Question

I’m trying to style the page using grid in CSS but I don’t think I understand very well how the area template works.

What are you doing:

.pai {
  display: grid;
  grid-template-columns: repeat(3, 50px) 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "img img img btn" 
    "btn img img"
}

.pai div {
  border: 1px solid;;
}

.filho1 { grid-area: img }
.filho2 { grid-area: img }
.filho3 { grid-area: img }
.filho4 { grid-area: btn }
.filho5 { grid-area: btn }
.filho6 { grid-area: img }
.filho7 { grid-area: img }

<div class="pai">
  <div class="filho1">1</div>
  <div class="filho2">2</div>
  <div class="filho3">3</div>
  <div class="filho4">4</div>
  <div class="filho5">5</div>
  <div class="filho6">6</div>
  <div class="filho7">7</div>
</div>

I guess I didn’t quite get that concept yet, in case what I want to do is two lines with the first row from the top having 4 columns, the first 3 columns will be images, the fourth is a button.

In column 2, I want to start the same, and the first column I want to start with btn and the last 2 columns end with images.

Is it possible? I really wanted to understand better, this example of mine I know is wrong but it is because I do not understand in practice how it works.

Answer 1

Dude got a lot of details on his Grid, first that if you put more than one element with the same name of grid-area logically they will be superimposed on each other. After you want an area to occupy two columns you need to "fill" this column by repeating the name of the area or putting a . kind of like below

Thus:

grid-template-areas: 
"img1 img2 img3 btn1" 
"btn2 btn2 img4 img5"

Or so, not repeating the btn2 , but putting a . at first:

grid-template-areas: 
"img1 img2 img3 btn1" 
". btn2 img4 img5"

To understand better look there as it would be the grid you want

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.pai {
    display: grid;
    grid-template-columns: repeat(3, 50px) 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;

    grid-template-areas: 
    "img1 img2 img3 btn1" 
    "btn2 btn2 img4 img5"
}
div {
    box-sizing: border-box;
    border: 1px solid #000;
}
.filho1 { grid-area: img1 }
.filho2 { grid-area: img2 }
.filho3 { grid-area: img3 }
.btn1 { grid-area: btn1 }
.btn2 { grid-area: btn2 }
.filho4 { grid-area: img4 }
.filho5 { grid-area: img5 }

<div class="pai">
    <div class="filho1">img1</div>
    <div class="filho2">img2</div>
    <div class="filho3">img3</div>
    <div class="btn1">button1</div>
    <div class="btn2">button2</div>
    <div class="filho4">img4</div>
    <div class="filho5">img5</div>
</div>

If you are interested in seeing more details, here is a very interesting documentation! https://css-tricks.com/snippets/css/complete-guide-grid/

In that guide you’ll see that:

It results in: