Tudo sobre Tecnologia da Informação

Dicas de Grid Layout Parte 2

Deixe os itens no HTML de A a H e deixe o CSS assim:

div.container {
    border: 3px solid blue;
    height: 250px;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    gap: 10px;
    align-items: start;
    justify-items: center;
    align-content: space-between;
    justify-content: end;
}

div.item {
    border: 3px solid red;
    padding: 5px;
}

Simplificando o container:

div.container {
    border: 3px solid blue;
    height: 250px;
    display: grid;
    grid-template: repeat(3, auto) / repeat(3, auto);
    gap: 10px;
    place-items: start center;
    place-content: space-between end;
}

Agora deixe o CSS do container assim:

div.container {
    border: 3px solid blue;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 80px 80px 80px;
    gap: 10px;
    place-items: normal normal;
    place-content: normal normal;
}

Adicione no HTML o I e o J nos itens, nós veremos que o J ficará espremido, por estar fora do Grid. Para ele ficar igual aos outros, colocamos a opção grid-auto-rows: 80px pra linhas, assim:

div.container {
    border: 3px solid blue;
    display: grid;
    grid-template-columns: 120px 120px 120px;
    grid-template-rows: 80px 80px 80px;
    grid-auto-rows: 80px;
    gap: 10px;
    place-items: normal normal;
    place-content: normal normal;
}

Temos também o grid-auto-flow, que define se os novos itens fora do Grid explícito serão adicionados na linha (com row, que é o padrão) ou na coluna (com colunm). Deixe o CSS assim:

div.container {
    border: 3px solid blue;
    display: grid;
    grid-template-columns: 120px 120px 120px;
    grid-template-rows: 80px 80px 80px;
    grid-auto-flow: column;
    grid-auto-rows: 80px;
    grid-auto-columns: 120px;
    gap: 10px;
    place-items: normal normal;
    place-content: normal normal;
}

Deixe agora o CSS assim:

div.container {
    border: 3px solid blue;
    display: grid;
    grid-template-columns: repeat(3, 120px);
    grid-template-rows: repeat(3, 80px);
    grid-auto-flow: row;
    grid-auto-rows: 80px;
    grid-auto-columns: 120px;
    gap: 10px;
    place-items: normal normal;
    place-content: normal normal;
}

Depois, altere apenas essa propriedade assim:

grid-template-columns: 1fr 1fr 1fr;

E depois assim:

grid-template-columns: 1fr 2fr 1fr;

E assim:

grid-template-columns: 1fr 4fr 1fr;

Depois assim:

grid-template-columns: repeat(2, 1fr) 4fr;

E assim:

grid-template-columns: 4fr repeat(2, 1fr);

Depois deixe assim:

grid-template-columns: 100px 40% repeat(2, 1fr);

Nós temos também propriedades para itens no Grid Layout, que são o grid-row-start, grid-row-end, grid-column-start e grid-column-end. Quem já jogou batalha naval entende mais facilmente o que é o Grid Layout.

Vamos supor um Grid Layout com 3 linhas e 4 colunas (como os itens de A a M), com esse CSS:

div.container {
    border: 3px solid blue;
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(4, 1fr);
}

div.item {
    border: 3px solid red;
    padding: 5px;
}

Nesse Grid, cabe até 12 itens dentro do Grid explícito. Mas podemos criar itens que ocupem mais áreas, como o espaço de 2 ou 4 itens. No Grid tem 4 grid lines deitadas, que ficam entre os três elementos da linha, e 5 grid lines em pé, que ficam entre os quatro elementos da coluna. Elas são contadas a partir do 1.

Vamos dividir o Grid da seguinte forma mostrada na imagem abaixo:

Pra fazer a caixa 1, nós puxaríamos um retângulo do ponto 1-1 até o 2-5, de forma semelhante a um polígono desenhado numa ferramenta como o Photoshop ou Gimp. O CSS ficaria assim:

.caixa1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 5;
}

.caixa2 {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 3;
}

.caixa3 {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 5;
}

Vamos criar um exercício do zero, com esse HTML:

<div class="container">
    <div class="caixa1">Caixa 1</div>
    <div class="caixa2">Caixa 2</div>
    <div class="caixa3">Caixa 3</div>
</div>

Com esse CSS:

.container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

Nós criamos um Grid com 3 × 4 itens (ou seja, 12 itens), mas temos três divs com caixas, e cada caixa ocupará o espaço de 4 itens, como descrito na imagem anterior. Essa é a configuração dos itens:

.caixa1 {
    background-color: red;
}

.caixa2 {
    background-color: green;
}

.caixa3 {
    background-color: blue;
}

Lembrando que podemos ver as caixas pelo Inspecionar Elemento do navegador.

Para criar as caixas, deixe o CSS dos itens assim:

.caixa1 {
    background-color: red;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 5;
}

.caixa2 {
    background-color: green;
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 3;
}

.caixa3 {
    background-color: blue;
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 5;
}

PS: Podemos também colocar números negativos da contagem inversa nos valores, dessa forma:

.caixa1 {
    background-color: red;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: -1;
}

.caixa2 {
    background-color: green;
    grid-row-start: 2;
    grid-row-end: -1;
    grid-column-start: 1;
    grid-column-end: 3;
}

.caixa3 {
    background-color: blue;
    grid-row-start: 2;
    grid-row-end: -1;
    grid-column-start: 3;
    grid-column-end: -1;
}

PS: Sempre use o Inspecionar Elemento do navegador para ver a numeração da grade antes de definir as áreas do Grid.

Vamos supor um container Grid, com 12 itens (3 × 4), igual ao que fizemos anteriormente, e dentro dele definimos uma área, que ocupa a metade esquerda. Ele teria esse CSS:

.caixa {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 3;
}

Podemos colocar o span pra contar a quantidade de lines, sem especificar o número exato dela, assim:

.caixa {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: span 3;
    grid-column-end: span 2;
}

Podemos simplificar tudo com grid-row, que define o início e o fim da linha numa propriedade só, e o grid-column, que define o início e o fim da coluna da mesma forma, ficando assim:

.caixa {
    grid-row: 1 / 4;
    grid-column: 1 / 3;
}

PS: Caso uma das propriedades acima tenha um valor só, o segundo será considerado o padrão, que é auto.

Com o mesmo HTML das caixas anteriores, vamos olhar o Grid pelo Inspecionar do navegador, e deixe o CSS assim:

.caixa1 {
    background-color: red;
    grid-row: 1 / 2;
    grid-column: 1 / -1;
}

.caixa2 {
    background-color: green;
    grid-row: 2 / -1;
    grid-column: 1 / 3;
}

.caixa3 {
    background-color: blue;
    grid-row: 2 / -1;
    grid-column: 3 / -1;
}

Com span:

.caixa1 {
    background-color: red;
    grid-row: 1 / span 1;
    grid-column: 1 / span 4;
}

.caixa2 {
    background-color: green;
    grid-row: 2 / span 2;
    grid-column: 1 / span 2;
}

.caixa3 {
    background-color: blue;
    grid-row: 2 / span 2;
    grid-column: 3 / span 2;
}

Podemos simplificar ainda mais, substituindo o grid-row e o grid-column por grid-area, na ordem row start, column start, row end e column end, assim:

.caixa1 {
    background-color: red;
    grid-area: 1 / 1 / 2 / 5;
}

.caixa2 {
    background-color: green;
    grid-area: 2 / 1 / 4 / 3;
}

.caixa3 {
    background-color: blue;
    grid-area: 2 / 3 / 4 / 5;
}

Em qualquer um deles, podemos usar o span, por exemplo:

.caixa1 {
    background-color: red;
    grid-area: 1 / 1 / span 1 / span 4;
}

.caixa2 {
    background-color: green;
    grid-area: 2 / 1 / span 2 / span 2;
}

.caixa3 {
    background-color: blue;
    grid-area: 2 / 3 / span 2 / span 2;
}

Agora faremos um desafio, que é criar um layout de um site usando Grid Layout, ele ficará dessa forma:

Vamos colocar esse HTML na página:

<div class="container">
    
</div>

E esse CSS:

.container {
    display: grid;
    grid-template-rows: 80px 40px 200px 40px;
    grid-template-columns: 200px 150px;
}

Olhe o Grid com o Inspecionar Elemento do navegador, ele ainda não estará da forma que a gente quer, mas vamos configurar.

Vamos completar o HTML com tags semânticas, assim:

<div class="container">
    <header class="caixa" id="topo">
        Topo
    </header>
    <nav class="caixa" id="menu">
        Menu
    </nav>
    <main class="caixa" id="principal">
        Principal
    </main>
    <aside class="caixa" id="secundario">
        Secundário
    </aside>
    <footer class="caixa" id="rodape">
        Rodapé
    </footer>
</div>

E deixe o CSS assim:

.container {
    display: grid;
    grid-template-rows: 80px 40px 200px 40px;
    grid-template-columns: 200px 150px;
    gap: 5px;
}

.caixa {
    background-color: lightgray;
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

E complete o CSS com isso:

#topo {
    grid-area: 1 / 1 / 2 / -1;
}

#menu {
    grid-area: 2 / 1 / 3 / -1;
}

#principal {
    grid-area: 3 / 1 / -2 / 2;
}

#secundario {
    grid-area: 3 / -2 / -2 / -1;
}

#rodape {
    grid-area: -2 / 1 / -1 / -1;
}

Agora teremos que configurar pra deixar em tela cheia, colocando isso no começo do CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

E deixando o container assim:

.container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 80px 40px 1fr 40px;
    grid-template-columns: 1fr 150px;
    gap: 5px;
}

PS: Podemos usar o site Grid Garden pra praticar o uso de Grid Layout, o link do site é esse: https://cssgridgarden.com/

Parte 1 da Matéria