Layouts em Css Grid

Explora a construção de Css Grids, um novo guia da W3 que permite a construção de layouts complexos
com recurso a código simples.

A internet nunca teve um verdadeiro sistema de layout.
Juntava-se tabelas, floats, posiÁıes absolutas e caixas flex, mas tinhamos sempre de preparar o conteúdo para compatibilidade e arranjar soluções semânticas de forma a conseguir encaixar tudo da forma mais apróximada ao pretendido. … frustrante as dezenas ou centenas de linhas css e a quantidade de classes e IDs de forma a conseguir linhas comuns e funcionais em layouts web. As grelhas CSS È um novo standard que j· vem com o IE e Edge e est· disponivel através de flags e prefixos no firefox, Chrome e webkit, que nos poupa bastante.
Este sistema permite definir a pagina, ou as secções da pagina como uma coleção de linhas verticais e horizontais que permitem criar células (semelhante a uma tabela), isto significa que com uma única linha css podemos rearranjar o conteúdo sem alterar a ordem do documento. A contrução responsive torna-se mais simples. Deixa de ser necessário o clássico wrapper ou container ficando apenas o conteúdo como a web é suposto ser!

TUTORIAL

1. Preparar o container

Há um único requisito ao utilizar a grelha css, é definir o elemento contentor para display : grid.
Uma vez feito isto podemos colocar e posicionar os restantes elementos, quer pela posição default da grelha quer por definições adicionadas ao css.

2. Alterar o fluxo

Por defeito todos os elementos estão alinhados a uma única coluna de multiplas linhas. Podemos no entanto alterar isto para uma grelha de linha única e multicolunas alterando o valor grid-autoflow.

.container {
display: grid;
/* now we will get one long column
with as many columns as children */
grid-auto-flow: column;
}

3. Definir a grelha

Provavelmente queremos mais que uma linha e coluna, pelo que podemos definir ambos. Podemos utilizar qualquer unidade de medida css nas definições. Começa com um layout simples, altura total com três colunas, tendo larguras fixas nas laterais, sendo que a coluna central fará a gestão do espaço.

4. Alinhar a grelha

Com a grelha construida podemos alinhar conteúdo. Fazemos isto baseado em linhas e básicamente dizemos qual a linha entre a qual queremos o nosso conteúdo.

.leftColumn {
grid-column-start: 1;
grid-row-start: 1
}

5. Definir as linhas

O posicionamento por linhas pode tornar-se rápidamente confuso, mas na realidade é bastante simples.
Grid-column-start:1 significa que a primeira coluna, 2 significa o final da mesma coluna, 3 o inicio da coluna seguinte. As linhas funcionam da mesma forma.

6. Expandir células

As grelhas não seriam muito práticas se apenas fizessem span a uma única célula. É por isso que é fácil fazer uma célula ocupar mais ou menos colunas e linhas de acordo com o necessário. Basta incluir grid-column-end/grid-row-end à medida que vai sendo necessário. As regras funcionam como mencionado.

.leftColumn {
/*start at the beginning of the grid*/
grid-column-start: 1;
/*expand past the gutter, to the end
of the main content area*/
grid-column-end: 4;
}

7. Expandir células

Podemos não querer saber onde ao certo um determinado elemento aparece na grelha, mas sabemos que queremos que este elemento ocupe um determinado espaço. O novo parâmetro específico da grelha fará exatamente isso. Basta definir grid-column/grid-row para span.

.leftColumn {
/*start at the beginning of the grid*/
grid-column-start: 1;
/*expand past the gutter, to the end
of the main content area, or 3 lines*/
span: 3;
}
8. Nomear linhas

Podemos simplificar ainda mais utilizando nomes para as nossas linhas. A única diferença a nomeação e o que já fizemos é que podemos incluir um nome entre parentises entre o tamanho da coluna ou linha. Podemos utilizar os nomes em substituição da numeração anterior.

.container {
grid-template-columns:
(sideStart) 350px
(sideEnd) 50px
(mainStart) 1fr (mainEnd)
}
.leftColumn {
grid-column: sideStart / sideEnd
}
9. As linhas nomeadas não são únicas

Os nomes atribuidos às linhas funcionam como classes, sendo que podemos reutilizá-las e repetir. Para espaçar podemos nomear as gutter como (gutter). Ficando com :

.container {
grid-template-columns: repeat(4,
(col) 75px (gutter) 20px
)
}
.main {
/* start at the second named col,
and end at the 6th named gutter */
grid-column: col 2 / span gutter 6
}
10. Simplificar os templates

Qualquer construção a partir deste ponto tende a ficar confusa. Podemos seguir a mesma lógica Boilerplate e repetir o código, no entanto temos uma nova função auxiliar chamada repeat o que permite escrever menos e poupar tempo e espaço.

.container {
grid-template-columns:
350px 50px 350px 50px 350px 50px;
grid-template-columns:
repeat(3, 350px 50px)
}
11. Simplificar o posicionamento

Temos também a possibilidade de manter as regras de posicionamento curtas utilizando e definindo grid-column/row-start e grid-column/row-end. Utilizando apenas grid-column/row seguido do valor inicial e final deparado por /.

.leftColumn {
/* equal to
grid-column-start: 1
grid-column-end: 4
*/
grid-column: 1 / 4;
grid-row: 2 / 4;
}
12. Ser mais conciso com a grelha

Podemos utilizar ainda menos regras utilizando a grid-area. Com isto podemos definir o inicio e fim de colunas e linhas com uma única regra.

.leftColumn {
/* equal to
grid-row-start: 2
grid-column-start: 1
grid-row-end: 4
grid-column-end: 3
/*
grid-area: 2 / 1 / 4 / 3;
}

13. Espaço vazio

Utilizamos uma nova unidade CSS (fr). Esta é uma unidade fracionária, criada especialmente para a grid, que representa a fração de espaço que sobra do container. Significa isto que se tivermos uma grelha com 100px de largo com duas areas, e a primeira tiver uma largura fixa de 72px, então 1fr é igual a 100-72 ou 28px.

.container {
display: grid;
width: 100px
grid-template-columns: 72px 1fr;
}
.leftColumn { /* the first, so 72px */
}
.rightColumn { /* the second, so 1fr
or 28px wide */
}

14. Utilizar 2fr

Se utilizarmos 2fr em vez de 1fr. Os resultados serão semelhantes ao flex-grow, sendo que o primeiro item ocuparia dois terços do espaço e o segundo um terço.

.container {
width: 200px;
grid-template-columns:
50px /* explcitly 50px side */
/* there are 4fr declared, so the
rest of the 150px is split into 4 */
1fr /* 1/4 of 150, or 37.5px */
2fr /* 2/4 of 150, or 75px */
1fr /* 1/4 of 150, or 37.5px */}

15. Ordem de fonte !== Ordem de apresentação

Dos pontos fortes com as grelhas css não precisando dos constantes wrappers podemos rearranjar e conteúdo quando estamos a construir responsive, alterando apenas os valores de grid-column e grid-row.

.container {
display: grid;
grid-template-columns: 250px 1fr 250px;}
.main { grid-column: 2 / 4 }
@media (min-width: 500px) {
.container {
grid-template-columns: auto;
}}

16. Nomear grid-area

Á medida que o layout cresce torna-se complicado recordar a sequência da grelha, assim temos a possibilidade de nomear as grid-areas. Esta nomeação vai agir como um género de variável à qual também nos podemos referir noutras secções do css.

.header {
grid-area: header;}
.sidebar {
grid-area: sidebar;}
.main {
grid-area: main;
}

17. Rearranjar por nome

Podemos listar os items pela ordem em que os queremos a aparecer, da mesma forma que o podemos fazer nas mediaqueries.

.container {
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
“header”
“sidebar”
“main”}

18. Ganhar complexidade

O passo anterior mostra como é fácil definir um grelha de uma coluna. Mas e se pretendermos algo um pouco mais complexo? Podemos incluir multiplas grid-areas por linha utilizando multiplos nomes por cada par de aspas.

.container {
grid-template-columns: 250px 250px;
grid-template-areas:
“header header”
“sidebar main”
“sidebar footer”
}

19. Atenção aos espaços

Provavelmente não queremos o conteúdo um contra o outro, podemos à mesma utilizar gutters com esta técnica utilizando . para representa uma área não nomeada da grelha.

.container {
grid-template-columns: 250px 50px 250px;
grid-template-areas:
/* the header takes up all 3 columns */
“. . header”
/* sidebar, gutter, then main */
“sidebar . main”
“sidebar . footer”
}
20. Alinhar  items

Um conjunto de regras flex pode ser usado com a grelha. Justify-self, justify-items, justify-content as well as align-self, align-items e align-content podem todos ser usados diretamente em partes relevantes da grelha.

.container {
grid-template-columns: 350px 350px;
/*center children horizontally*/
justify-items: center;
/*place children at the vertical end*/
align-items: end;
}

Aproveita e recebe no teu email todas as novidades, assina já a newsletter! Sem spam apenas conteúdo e tutoriais. #webdesign #webdevelopment

Leave a Reply

Your email address will not be published. Required fields are marked *