🥇 Passo a passo da grade responsiva DIY

Primeiro abra a Calculadora

Como?

Primeiro, você decide o tamanho da fonte.

vamos usar 15px

Em seguida, decida uma altura de linha que se ajusta a você

18 px em nosso caso, que produz uma proporção de 1,2

Escolha um conjunto de pontos de interrupção que combinem com a altura de linha escolhida

540px , 720px , 900px e 1080px, que são todos múltiplos de 18

Agora, vamos pegar o CSS com a grade e colá-lo em seu código.

Depois de ter a grade, você precisa definir um titular para seu conteúdo.

isso você pode conseguir com o seguinte código:

<div style="width:100%; position: fixed;">
  <div class="inner grid">
    <p>Hello Grid!</p>
  </div>
</div>

.grid {
  /* Code */
}
.inner {
  width: 72rem; /* 1080px */
  margin: 0 auto;
}

para o contêiner, vamos usar o remtamanho em vez do pixel

Para o propósito deste experimento, vamos criar duas colunas de conteúdo, distanciadas de cada uma por uma linha de altura.

<section>
  <div class="inner grid">
    <div class="span2">
      <p>Hello there, Do i look aligned? </p>
    </div>
    <div class="span2">
      <p> Yep, you look aligned alright </p> 
    </div>
    <div class="clearfix"></div>
  </div>
</section>

.span2 {
  display: block;
  width: 34.8rem; 
  margin: 0 1.2rem 0 0;
  float: left;
}
.clearfix {
  clear: both;
}
/* The crearfix is for antibug purposes */

o tamanho da coluna é dado pela fórmula:
34,8 rem = (1080 ”consulta de mídia” / (15 ”tamanho da fonte” * 2 “quantidade de colunas”)) – (proporção de 1,2 ”* 1” número de espaçamentos entre colunas ”) * /

Ao trabalhar com diferentes pontos de interrupção, você pode alterar a quantidade de colunas. Para cada 25 ems você pode adicionar uma coluna sem que o texto dentro pareça ruim.

Por outro lado, colunas com mais de 40 ems também ficarão ruins porque haverá muitos caracteres por linha (mais de 100 aprox).

são apenas diretrizes. você pode usar a fórmula acima para criar seus próprios tamanhos de coluna.
note que se você reduzir o tamanho da fonte, você pode ter mais colunas. isso se baseia na necessidade de ter entre 60 e 80 caracteres por linha. é por isso que 25 ems e não 25 rems .

A proporção entre o tamanho da fonte e a altura da linha geralmente produz um deslocamento vertical no navegador. Você tem que ajustar isso manualmente, colocando algum preenchimento na parte superior dos recipientes.

usamos um estofamento de 3px para ajustar a diferença de 3px entre 15 e 18

Cada tipo de letra possui um alinhamento vertical diferente. Isso faz com que a tipografia se mova para cima e para baixo na grade quando você altera as fontes. A altura da linha e as margens permanecerão as mesmas, mas as letras não ficarão mais na linha de base. Você pode corrigir isso alterando o preenchimento na parte superior do contêiner de acordo.

tenha cuidado com os espaçamentos gerados por componentes html, como conjuntos de campos, tabelas, blockquotes, etc., redefina as margens e preenchimento para 0 e ajuste-os manualmente.

Leia aqui a explicação de por que a Grade Responsiva DIY .

Como?

Related Posts