No post anterior vimos as propriedades que usamos no container ao trabalhar com CSS Grid. Agora veremos as propriedades que utilizamos nos itens do container.
Itens
Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).
Neste post veremos as propriedades que ficam nos elementos da grid.
Teremos basicamente um container com alguns itens dentro.
Esta propriedade nós já vimos no post anterior. Ao declarar nomes para as áreas da nossa grid, utilizamos o grid-area para indicar a área onde um item irá se posicionar.
grid-column-start, grid-column-end, grid-row-start e grid-row-end
Indicar nomes para cada área da nossa grid e depois posicionar os itens usando o nome é bem simples. Porém, pode ser que você precise de algo mais flexível do que isso.
Com as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end nós podemos indicar em que linha e coluna um item deve iniciar e acabar. Podemos usar tanto número quanto nomes.
grid-column e grid-row
Essas duas propriedades são atalhos para as 4 propriedades anteriores.
Em grid-column nós indicamos o início / fim da coluna, e em grid-row nós indicamos o início e fim da linha. Os valores são separados por /.
Podemos também indicar essas 4 posições dentro de apenas uma única propriedade. Para isso também usamos o grid-area. A ordem é inicio-linha / inicio-coluna / fim-linha / fim-coluna
justify-self
Alinha o item da grid horizontalmente dentro de sua própria célula (área).
stretch (padrão): estica o item horizontalmente para ele preencher sua célula
start: alinha o item no início de sua célula
end: alinha o item no fim de suas células
center: alinha o item no centro de suas células
align-self
Alinha o item da grid verticalmente dentro de sua própria célula (área).
stretch (padrão): estica o item verticalmente para ele preencher sua célula
start: alinha o item na parte de cima de sua célula
end: alinha o item na parte de baixo de sua célula
center: alinha o item no centro de sua célula
place-self
Atalho para align-self e justify-self em uma única declaração.
CSS Grid – Um Guia Interativo (Parte 1 – Containers)
Olá Web Developers!
Há um bom tempo que os navegadores já suportam bem o CSS Grid. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como ele funciona.
Já fizemos aqui um guia completo sobre FlexBox. Para conferir:
O CSS Grid é um sistema de estruturação de layout que o CSS nos fornece. Diferente do Flexbox, que apenas nos permite trabalhar em uma única dimensão, o CSS Grid nos permite configurar layouts em duas dimensões (linhas e colunas). A junção de linhas e colunas formam uma grade, o que dá o nome a esse sistema (Grid).
O CSS Grid é bem poderoso e completo, permitindo que certas coisas sejam feitas de mais de uma maneira, o que pode confundir muitos iniciantes. Portanto, aqui irei mostrar as principais partes da forma mais simples para que você já termine de ler este post sabendo trabalhar com o CSS Grid.
Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (grid container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).
Grid Container
Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o grid container.
Teremos basicamente um container com alguns itens dentro. Dependendo do exemplo a quantidade de itens poderá ser alterada.
Primeiro precisamos definir que o nosso container é do tipo “grid”; Fazemos isso com a propriedade “display”.
.container{
display: grid;
}
Isso irá criar uma grid do tipo block, significando que o .container irá ocupar a linha inteira.
Caso você queira containers inline, utilize display: inline-grid;
grid-template-columns e grid-template-rows
Como estamos trabalhando com uma grade, precisamos indicar quantas linhas e quantas colunas nossa grade terá.
Para colunas usamos o grid-template-columns e para linhas usamos o grid-template-rows.
Se queremos 3 colunas, não indicamos com o número três. O que fazemos na verdade é indicar qual o tamanho de cada coluna que queremos. A medida pode ser em qualquer unidade (px, em, %, cm, etc). Cada valor deve ser separado por um espaço.
Exatamente da mesma maneira nós declaramos as linhas utilizando a propriedade grid-template-rows.
grid-template-areas
Até agora só declaramos o tamanho das nossas colunas e linhas. Você deve ter notado que nossos itens vão se organizando na grid de acordo com a ordem em que estão no HTML.
Porém, o CSS Grid nos permite ir além disso: podemos dar nomes para cada área da nossa grade e depois indicar onde cada elemento deve ir. Dessa maneira fica bem simples de entender a estrutura da nossa grid. Fazemos isso com a propriedade grid-template-areas.
Vamos alterar um pouquinho o nosso HTML. Iremos colocar as classes header, sidenav, content e footer nos itens da grid para podermos indicar a posição de cada um deles depois.
Para cada item, vamos declarar a propriedade grid-area, que serve para indicar o nome da área em que cada elemento deverá ocupar na grid. Para facilitar eu dei o mesmo nome das classes, mas você pode dar o nome que quiser.
Agora vamos ao que interessa: indicar o nome das áreas da nossa grid.
Para dar nomes às áreas de uma mesma linha, escrevemos dentro de aspas "". Ao abrir novas aspas estaremos indicando que estamos indo para a linha seguinte.
No exemplo abaixo nós escrevemos o nome das áreas em uma única linha. Mas para ficar mais simples de entender nós poderíamos ter escrito em linhas separadas. Fica visualmente mais legível:
Se quiser criar uma área sem nome, coloque .. Experimente: “header header” “content sidenav” “. footer”
grid-column-gap, grid-row-gap e grid-gap
Nossos itens estão todos colados. Podemos indicar qual o espaço entre linhas e colunas.
Para isso usamos as propriedades grid-column-gap e grid-column-row.
O grid-gap é um atalho para declarar as duas propriedades em um só lugar.
Se você passar um único valor, os dois serão aplicados para o espaço para linhas e colunas. Se passar dois valores, o primeiro será para linhas e o segundo para colunas.
.container{
grid-gap: 20px;
grid-gap: 20px 50px;
}
* O prefixo grid- destas propriedades está sendo removido e já é suportado nos navegadores modernos. Portanto, também pode-se utilizar as propriedades column-gap, row-gap e gap.
Alinha todos os itens da grid horizontalmente dentro de sua própria célula (área).
stretch (padrão): estica os itens horizontalmente para eles preencherem sua célula
start: alinha os itens no início de suas células
end: alinha os itens no final de suas células
center: alinha os itens no centro de suas células
align-items
Alinha todos os itens da grid verticalmente dentro de sua própria célula (área).
stretch (padrão): estica os itens verticalmente para eles preencherem sua célula
start: alinha os itens na parte de cima de suas células
end: alinha os itens na parte de baixo de suas células
center: alinha os itens no centro de suas células
place-items
Atalho para align-items e justify-items em uma única declaração.
justify-content
O justify-item alinha cada item dentro de sua própria área. Já o justify-content alinha horizontalmente as áreas em relação ao container.
stretch: redimensiona os itens da grid para preencherem a largura do container. Apenas funciona se você não tiver declarado uma largura para as colunas.
start: alinha as áreas no início da grid
end: alinha as áreas no final da grid
center: alinha as áreas no centro da grid
space-around: distribui as áreas com o espaço a sua volta
space-between: distribui as áreas com o espaço entre elas
space-evenly: distribui o espaço igualmente entre as áreas
align-content
O align-item alinha cada cada item dentro de sua própria área. Já o align-content alinha verticalmente as áreas em relação ao container.
stretch: redimensiona os itens da grid para preencherem a altura do container. Apenas funciona se você não tiver declarado uma altura para as linhas.
start: alinha as áreas no topo da grid
end: alinha as áreas na base da grid
center: alinha as áreas no centro da grid
space-around: distribui as áreas com o espaço a sua volta
space-between: distribui as áreas com o espaço entre elas
space-evenly: distribui o espaço igualmente entre as áreas
place-content
Atalho para align-content e justify-content em uma única declaração.
grid-auto-columns e grid-auto-rows
Pode ser que você precise criar novas linhas ou colunas, as quais ainda não estão declaradas. Ao serem criadas, qual o tamanho delas?
Estas propriedades nos permitem indicar qual será o tamanho de novas linhas e colunas criadas.
Um exemplo bem simples é caso você não tenha declarado o tamanho das linhas ou colunas. Ao adicionar novos elementos, eles ficarão com o tamanho indicado nestas propriedades.
Nós aprendemos a posicionar os itens da grid passando o nome das áreas.
Porém, há outra maneira (um pouco mais complicada) de se fazer isso. Após indicar o tamanho das áreas e colunas, podemos indicar em que linha/coluna o item começa e em que linha/coluna ele termina. Ficaria assim:
.item{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3
}
/*ou com os atalhos:*/
.item{
grid-column: 1 / 2;
grid-row: 2 / 3;
}
/*ou com esse atalho*/
.item{
grid-area: 1 / 2 / 2 / 3;
}
Se você declarar, por exemplo, para um item se posicionar em uma linha ou coluna que não foi declarada, ele ficará com as dimensões declaradas em grid-auto-columns e grid-auto-rows também.
grid-auto-flow
Se você possui itens que não possuem uma área declarada para ficar, esta propriedade indica se estes itens devem ir para uma nova linha ou coluna.
grid
Atalho para definir em uma única declaração as seguintes propriedades: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns e grid-auto-flow
Funções e Valores Especiais
O CSS Grid também veio com palavras-chave que guardam valores especiais e também novas funções para dar ainda mais poder à criação de nossos layouts.
Valores Especiais
Ao declarar as dimensões das linhas e colunas, podemos indicar algumas palavras especiais ao invés de valores numéricos:
min-content: o elemento ficará com o tamanho mínimo de seu conteúdo
max-content: o elemento ficará com o tamanho máximo de seu conteúdo
auto: utiliza o espaço disponível
No exemplo a seguir, o primeiro item ficará com o tamanho mínimo de seu conteúdo, ou seja, seu texto. O segundo item ficará com o tamanho máximo necessário para caber seu conteúdo (texto).
Já o terceiro elemento ficará com o espaço que sobrou.
A unidade fr
Além de indicar a dimensão de linhas e colunas com as tradicionais unidades como px, % e em, agora também contamos com o fr.
Esta unidade indica fração.
No código abaixo cada uma das colunas ficará com 1/3 do espaço disponível (1fr + 1fr + 1fr = 3).
Experimente brincar com os valores das colunas no Playground abaixo:
A função minmax()
Imagine que você tenha uma linha ou coluna que pode variar de tamanho, mas que ela não pode passar de um valor mínimo ou máximo. Esta função nos permite indicar ambas as dimensões limites.
No código abaixo a primeira e terceira coluna terão 1fr de largura. A segunda coluna terá seu tamanho alterado de acordo com a largura de seu container. O tamanho mínimo será 100px e o máximo será 50% da largura do container (isso mesmo, podemos misturar unidades diferentes!).
Isso ajuda muito a ter mais controle do tamanho dos elementos e também nos poupa de escrever vários media queries.
A função fit-content()
Esta função recebe um único parâmetro, o tamanho máximo que um elemento pode chegar. É como se você usasse o min-content, mas com um controle de tamanho máximo que o elemento pode ter.
Uma diferença principal com o minmax() é que o minmax() sempre buscará ocupar o maior espaço possível, enquanto o fit-content() não ocupará mais espaço do que o necessário.
A função repeat()
Quando precisarmos criar mais de uma linha ou coluna com a mesma dimensão, utilize a função repeat() para não ter que ficar escrevendo várias vezes. Primeiro indicamos o número de repetições e depois, o valor a ser repetido.
No código abaixo nossa primeira coluna terá 50px de largura. Depois teremos 3 colunas com 20px e uma última com 1fr.
Experimente mudar a quantidade de repetições e o valor da dimensão dos itens repetidos no Playground abaixo.
auto-fill e auto-fit
Junto ao repeat() podemos usar as palavras especiais auto-fill e auto-fit. Isso ajuda muito na hora de criar layouts responsivos de forma bem simples.
Nos exemplos abaixo, note que eu não indiquei quantas colunas eu quero. Na função repeat() eu usei os valores auto-fill e auto-fit.
O auto-fill tenta preencher o espaço disponível com quantos itens der, não importando se os itens estão vazios. Já o auto-fit também tenta colocar quantas colunas der, expandindo os itens para caber no espaço disponível.
Veja que, como estamos usando a função minmax(), também temos controle do tamanho mínimo e máximo dos itens.
CSS Flexbox – Um Guia Interativo (Parte 2 – Itens)
Olá Web Developers!
No post anterior vimos as propriedades que usamos no container ao trabalhar com Flexbox. Agora veremos as propriedades que utilizamos nos itens do container.
Itens
Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).
Neste post veremos as propriedades que ficam nos elementos filhos.
Teremos basicamente um container com alguns itens dentro.
Você deve se lembrar da propriedade align-items que vimos no post sobre as propriedades do container.
A propriedade align-self nos permite sobrescrever o valor desta propriedade para um único item. Assim podemos, por exemplo, colocar um único item no final de uma linha enquanto todos os outros estão no começo.
CSS Flexbox – Um Guia Interativo (Parte 1 – Containers)
Olá Web Developers!
Há um bom tempo que os navegadores já suportam bem o Flexbox. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como o Flexbox funciona.
O Flexbox (Flexible Box) nos permite organizar, alinhar e distribuir itens dentro de um container. Com ele fica mais simples definir o tamanho e o alinhamento vertical e horizontal de itens.
Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens (elementos filhos).
Container
Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o container.
Teremos basicamente um container com três itens dentro.
Primeiro precisamos definir que o nosso container é do tipo “flex”; Fazemos isso com a propriedade “display”.
No exemplo abaixo, utilize o checkbox para ligar/desligar o Flexbox.
flex-direction
Indica a direção dos itens, definindo o que vamos chamar de eixo principal (main-axis).
row (padrão): da esquerda para direita
row-reverse: inverso de row
column: de cima para baixo
column-reverse: inverso de column
flex-wrap
O comportamento padrão dos itens de um elemento flex é ficar em uma única linha. Se a largura total de todos os itens for maior do que o espaço disponível, os itens continuarão na mesma linha.
Esta propriedade permite que os itens sejam jogados em outra linha caso não haja mais espaço na linha.
nowrap (padrão): todos os itens ficam em uma única linha
wrap: os itens que não cabem na linha são jogados para baixo
wrap-reverse: os itens que não cabem na linha são jogados para cima
flex-flow
Esta propriedade é apenas um atalho para flex-direction e flex-wrap, nos permitindo declarar o valor de ambos em uma única propriedade.
.container{
display: flex;
flex-flow: row wrap;
}
justify-content
Define o alinhamento dos itens ao longo do eixo principal.
flex-start (padrão): os itens ficam junto no começo da linha
flex-end: os itens ficam juntos no final da linha
center: os itens ficam centralizados na linha
space-between: os itens são distribuídos igualmente no espaço disponível. O primeiro item fica no começo da linha e o último fica no final.
space-around: os itens são distribuídos igualmente no espaço disponível ao redor deles.
space-evenly: os itens são distribuídos igualmente no espaço disponível.
flex-direction: column
Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.
align-items
Define o alinhamento dos itens perpendicularmente em relação ao eixo principal.
Pense nele como um justify-content, mas que alinhará os itens no outro eixo.
stretch (padrão): estica os elementos para preencherem o container.
flex-start: os itens ficam junto no começo do eixo perpendicular
flex-end: os itens ficam juntos no final do eixo perpendicular
center: os itens ficam centralizados no eixo perpendicular
baseline: parecido com o center, mas usando a base da linha como referência. No exemplo abaixo, note como os textos dos itens ficam alinhados.
flex-direction: column
Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.
align-content
Alinha as linhas do container.
Por alinhar as linhas, esta propriedade só tem efeito quando há mais de uma linha.
stretch (padrão): estica as linhas para preencherem o espaço restante.
flex-start: as linhas ficam juntas no começo do container
flex-end: as linhas ficam juntas no final do container
center: as linhas ficam centralizadas no container
space-between: as linhas são distribuídas igualmente. A primeira linha fica no começo do container e a última fica no final.
space-around: as linhas são distribuídas igualmente no espaço disponível ao redor delas.
flex-direction: column
Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.
Houve um tempo em que posicionar elementos pelo CSS poderia ser trabalhoso, dependendo do que fosse preciso criar.
Então veio o Flexbox, facilitando o posicionamento de elementos. Logo em seguida os navegadores começaram a dar suporte ao CSS Grid, e então muitos ficaram com a dúvida: FlexBox ou CSS Grid?.
Um erro comum é pensar que o CSS Grid veio para ocupar o lugar do FlexBox, já que os navegadores começaram a dar suporte mais recentemente. Mas esse é um grande erro.
Flexbox faz coisas que o CSS Grid não pode fazer;
CSS Grid faz coisas que o Flexbox não pode;
Ambos podem trabalhar em conjunto;
Há coisas que podemos fazer com ambos, mas que um faz de maneira melhor e mais simples;
Quando usar FlexBox?
Claro que podemos usar o flexbox para trabalhar com elementos em duas dimensões, mas flexbox é mais bem utilizado quando estamos trabalhando com elementos em apenas uma dimensão, seja linha ou coluna.
Um bom exemplo é quando criamos um menu, seja ele vertical ou horizontal.
Eu diria que ele é bom para alinhar elementos, não importa a direção.
Além disso, não precisamos nos importar com a quantidade de itens, já que o Flexbox não requer que isso seja declarado.
Quando usar o Grid?
Claro que podemos usar o Grid para trabalhar com elementos em uma única dimensão, mas ele é ótimo quando estamos trabalhando com elementos em duas dimensões, principalmente para definir a estrutura de uma página, o que seria muito mais difícil com FlexBox.
Você pode indicar onde um elemento começa e onde ele acaba na sua grid, o que te dá muita flexibilidade. Ou também pode-se dar nomes para as áreas da sua grid, e então indicar a um elemento que ele pertence àquela área, o que deixa o código muito mais legível e simples de manter, como mostrado no exemplo acima.
Então, se você tiver já um determinado número de linhas e colunas, provavelmente Grid será melhor do que o FlexBox para você neste momento.
Além disso, é provável que escreva bem menos media queries, já que podemos aproveitar funcionalidades como auto layout, minmax(), repeat() e auto-fill.
Quando usar os dois juntos?
E claro que podemos aproveitar o melhor dos dois mundos!
No exemplo acima foi feito o seguinte:
O layout da página foi definido com CSS Grid;
O cabeçalho possui um menu, o qual teve seus itens organizados com FlexBox;
Cada item do menu possui uma pequena estrutura para posicionar seus elementos (ícone e textos), que pode ser vista pelas bordas brancas. Isso foi feito com CSS Grid.
Conclusão
Então, dependendo da necessidade, um pode ser uma opção mais viável, mas não é errado usar o outro.
Nada te impede de comer com duas facas ou com dois garfos, mas usar os dois juntos e saber o melhor momento de usar cada um facilita a nossa vida, não é mesmo?
Conforme você for obtendo mais intimidade com FlexBox e CSS Grid, a escolha pelo melhor para a sua necessidade ficará cada vez mais intuitiva.
