Skip to content

Instantly share code, notes, and snippets.

@lcds90

lcds90/GRID.md

Last active November 3, 2021 14:52
Show Gist options
  • Save lcds90/bf546b1174d9ad674604647627372125 to your computer and use it in GitHub Desktop.
Save lcds90/bf546b1174d9ad674604647627372125 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive CSS Tricks
Raw
README.md

Conceitos de responsividade

Tipo Modo Declaração Descrição
Texto Fixo 1px Texto não muda, independente do dispositivo / zoom aplicado.
Texto Fluido 1em Multiplicado a partir do elemento pai.
Texto Fluido 1rem Multiplicado pelo elemento root (html), padrão de 16px.
Layout Fixo 1px Layout não muda, independente do dispositivo / zoom aplicado.
Layout Fluido 1% Calculo a partir da porcentagem a partir do elemento pai.
Layout Fluido 1vh Relativo á 1% da altura do dispositivo.
Layout Fluido 1vw Relativo á 1% da largura do dispositivo.
Layout Fluido 1vmin Em relação a 1% da dimensão menor da janela de visualização, ou seja depende de quem for menor vh ou vw.
Layout Fluido 1vmax Em relação a 1% da dimensão menor da janela de visualização, ou seja depende de quem for maior vh ou vw.
Layout Fluido 1fr Relacionado á fração do elemento disponível. Use na propriedade referente ao grid
Layout Fluido auto Relacionado automaticamente a partir do calculo do elemento. Use na propriedade referente ao grid

Metadado responsável para distribuir os valores para ser calculado o viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Reset em valores padrões do CSS.

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

Tecnica de fonte responsiva, isso serve para ter uma visualização melhor no código e fixar um padrão no desenvolvimento.

html {
   font-size: 62.5% /* A cada 1rem será considerada 10px */
}
body {
   font-size: 1.6rem /* 16 pixels */
}
p {
   font-size: 2.4rem /* 24 pixels */
}

Quando utilizamos a propriedade 100vw, é contabilizado junto o scrollbar do navegador, retire a propriedade max-width e conseguirá observar esse efeito, com ela aplicada conseguimos delimitar somente o que é referente ao corpo do documento.

.container {
  width: 100vw;
  max-width: 100%;
}

Opte sempre por imagens SVG quando há opção pois elas oferecem alta resolução independente do dispositivo.

Raw
GRID.md

CSS Grid

Introdução

Antigamente um dos maiores desafios relacionado ao desenvolvimento web se tratava na construção de layouts, conforme o tempo foi avançado várias abordagens (hoje isso se chama gambiarra) foram sendo utilizadas, tendo métodos desde da utilização com tabelas, floats, com a propriedade position e display block, inline-block e assim por diante. Agora imagine o trabalho não só para construir mas para quando quisesse fazer alguma alteração no layout, a responsabilidade poderia estar no elemento HTML ou divido em várias seções no CSS, com isso tudo foi gerado a grande fama de dificuldade que se tem como trabalhar com CSS.

Mas queremos aqui, que você venha dar uma chance para nossas aplicações estarem bonitas (e com isso você não perder nenhum fio de cabelo). Hoje em dia já possuímos o método de layout através flexbox, que foi um divisor na web em relação aos métodos passados com criação de layout, mas algo em relação a diferença do grid está no seguinte fator:

  • Flexbox: Unidirecional, tratamos somente um eixo, somente horizontal ou vertical, ele é baseado no conteúdo dos itens (a definição do tamanho do item, é definido no próprio item)
  • Grid: Bidrecional, conseguimos tratar os dois eixos horizontal e vertical, ele é baseado na definição do container (a definição do tamanho dos itens, é feito no elemento pai)

Exemplo sobre a explicação acima

Caso tenha dúvida, lembre-se:

  • Quero tratar somente linha ou coluna: Utilize display: flex
  • Quero controlar linha e coluna: Utilize display: grid

Nada te impede de utilzar o grid caso queira tratar somente linha ou coluna (priorize sempre em simplificar seu código 😃), mas o conteúdo abordado será focado exclusivamente na utilização do display: grid

Conceitos Fundamentais

01 - Fundamentos

  • Todos nodes filhos de um elemento com display:grid, sempre irão ser items de grid explicitamente
  • A declaração direta é chamada de implicit grid
  • Os números em relação ao grid não significa a coluna em si, mas sim o começo e aonde termina
<section class="container"> <!-- Elemento com grid aplicado -->
    <article></article> <!-- Item do grid -->
    <article></article> <!-- Item do grid -->
    <article></article> <!-- Item do grid -->
</section>
 .exemplo {
    display:grid;
 }

02 - Implicito X Explicito

  • O modo explicito acontece quando há declaração EXATAMENTE do que o elemento precisa distribuir para os itens do grid.
  • O modo implicito acontece quando o navegador precisa alocar um item extra, e já foi ocupado toda a definição anterior. Exemplo: 5 itens com somente duas colunas, uma linha extra será criada. Então, a implicidade ocorre no momento da criação da segunda linha (grid-row) para encaixar os elementos.
  • O tamanho gerado por padrão da implicidade é 1fr, porém pode ser manipulada com auto-rows/columns.
 .exemplo {
    display:grid;
    grid-template-columns: 1fr 100px;
    grid-auto-rows: 250px;
 }

03 - Auto Flow

  • O auto flow controla onde a implicidade anterior ocorre, determina se o elemento extra irá se ajuntar como uma nova coluna ou linha do grid.
  • Por padrão, ele sempre irá adicionar uma nova linha para ocorrer a implicidade.
 .exemplo {
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: 1fr;
    /* Será somente uma linha, os novos itens irão surgir como uma nova coluna */
 }

04 - Definição de tamanhos

  • Não utilize a definição do grid com %,
  • Porque a porcentagem é relacionado ao algo que tenha como pai algo pré-definido

container pai como width: 100vw, no node filho pode-se usar 50% (50vw)

  • Opte pelas medidas de frações, pois elas realizam o calculo automatico para nós
  • A definição do grid-auto-rows por padrão é 1fr ao declarar o display: grid
  • A propriedade auto ocupa somente o espaço restante referente aos calculos dado.
  • A propriedade gap serve para criar espaçamento entre os itens da coluna.

Vídeo explicativo sobre o conceito de utilizar fr

 .exemplo {
    display:grid;
    grid-template-columns: 2fr auto 200px;
    /*  podemos combinar a utilização com outros valores */
 }

05 - Repeat

  • A função repeat evita repetição desnecessária em relação a quantidade de elementos definidos
  • Podemos utilizar da melhor forma que for convecional ao código.

coluna: grid-column / linha: grid-row

 .exemplo {
    display:grid;
    grid-template-columns: 2fr repeat(3, 1fr auto) 200px;
    grid-template-rows: repeat(2, 1fr);
    /*  
    grid-template-columns: 2fr 1fr auto 1fr auto 1fr auto 200px;
    grid-template-rows: 1fr 1fr;
    */
 }

06 - Tamanho de itens do grid

  • Não podemos definir o width explicito (500px) no grid item, pois todos os itens são afetados pela explicidade
  • Para alterar a quantidade de colunas/linhas ocupadas, utilizamos a propriedade span e logo em seguida a quantidade.
  • Para a coluna usamos grid-column e para as linhas usamos grid-row.
 .exemplo-item {
   grid-column: span 3;
   grid-row: span 2;
 }

07 - Organinzando itens no grid

  • Diferente do span, podemos dizer exatamente onde queremos que nosso item comece no grid.
  • Para a coluna usamos grid-column e para as linhas usamos grid-row.
  • Quando colocamos um valor positivo
    • Coluna: começa da esquerda para direita
    • Linha: começa de cima para baixo
  • Quando há um valor negativo
    • Coluna: começa da direta para a esquerda.
    • Linha: começa de baixo para cima.

IMPORTANTE: Essa definição só funciona em relação a quantidade do que foi declarado explicitamente, tendo em consideração o exemplo abaixo imagine que um item extra surge e com isso uma nova linha é gerada, a declaração -1 só irá contar a partir da terceira para trás e não é inclusa a última gerada automaticamente pelo navegador.

 .exemplo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
 }

 .exemplo-item {
   /* 
   grid-column-start: 1;
   grid-column-end: 3;
   utilize o shorthand: inicio / fim
   */
   grid-column: 1 / 4; /* Ocupara todo o espaço disponível */
/* grid-column: 1 / -1 Começa do primeiro item até o último, -2 = penúltimo e assim por diante */
 }

08 - Propriedades reservadas

  • auto-fill: irá criar colunas implicitas para encaixar o item desejado caso o mesmo esteja como último elemento
  • auto-fit: os itens irão se ajeitar de acordo com as colunas pré definidas e não irá criar nenhuma coluna extra para o tal feito.
  • fit-content: aqui você pode definir o máximo que o item poderá alcançar em questão de tamanho, não é comumente usada, porém ela é semelhante ao minmax, porém o mínimo será o valor de 0
  • minmax: como a própria declaração já deixa explicita, você iŕa definir o valor mínimo logo em seguida o máximo que ela pode alcançar.

Como essas propriedades são tãooooo poderosas, são capazes de deixar nosso layout responsivo sem ao menos declarar alguma media query para conseguir tal feito.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment