Estou tentando estilizar a pagina utilizando grid no CSS mas acho que ainda não compreendi muito bem como funciona o template area.
O que esto fazendo:
.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>
Eu acho que não entendi direito esse conceito ainda, no caso o que estou querendo fazer é duas linhas com a primeira linha de cima tendo 4 colunas, sendo que as 3 primeiras colunas serão imagens, a quarta é um botão.
Na coluna 2, quero iniciar a mesma, sendo que a primeira coluna quero que comece com o btn e as 2 ultimas colunas termine com as imagens.
É possível? Realmente queria entender melhor, esse meu exemplo sei que está com erro mas é porque não entendo na prática como funciona.