Esta postagem destaca algumas linhas poderosas de CSS que fazem um trabalho pesado e ajudam a criar layouts modernos e robustos.
Os layouts CSS modernos permitem que os desenvolvedores escrevam regras de estilo realmente significativas e robustas usando apenas algumas teclas. A discussão acima e esta postagem subsequente examinam 10 linhas poderosas de CSS que fazem um trabalho pesado e sério.
Para acompanhar ou testar essas demonstrações por conta própria, confira a incorporação do Glitch acima ou acesse 1linelayouts.glitch.me.
01. Supercentralizado: place-items: center
Para o primeiro layout de "linha única", vamos resolver o maior mistério de todos os setores do CSS: a centralização das coisas. Saiba que é mais fácil do que você imagina com o place-items: center.
Primeiro, especifique grid como o método display e, em seguida, escreva place-items: center no mesmo elemento. place-items é uma abreviação para definir align-items e justify-items de uma só vez. Ao defini-lo como center, align-items e justify-items serão definidos como center.
.parent {
display: grid;
place-items: center;
}
Isso permite que o conteúdo seja perfeitamente centralizado dentro do pai, independentemente do tamanho intrínseco.
02. A panqueca desconstruída: flex: <grow> <shrink> <baseWidth>
Em seguida, temos a panqueca desconstruída! Este é um layout comum para sites de marketing, por exemplo, que pode ter uma linha de três itens, geralmente com uma imagem, um título e, em seguida, texto descrevendo algumas características de um produto. Em dispositivos móveis, queremos que elas fiquem bem empilhadas e se expandam conforme aumentamos o tamanho da tela.
Ao usar o Flexbox para esse efeito, você não precisará de consultas de mídia para ajustar o posicionamento desses elementos quando a tela for redimensionada.
A abreviação flex significa: flex: <flex-grow> <flex-shrink> <flex-basis>.
Por isso, se você quiser que as caixas sejam preenchidas até o tamanho <flex-basis>, reduza para tamanhos menores, mas não aumente para preencher o espaço adicional, escreva: flex: 0 1 <flex-basis>. Nesse caso, a <flex-basis> é 150px, então ela tem esta aparência:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Se você quiser que as caixas se estendam e preencham o espaço à medida que são ajustadas para a próxima linha, defina <flex-grow> como 1, para que o resultado seja semelhante a este:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Agora, conforme você aumenta ou diminui o tamanho da tela, esses itens flexíveis encolhem e crescem.
03. A barra lateral diz: grid-template-columns: minmax(<min>, <max>) …)
Esta demonstração usa a função minmax para layouts de grade. O que estamos fazendo aqui é definir o tamanho mínimo da barra lateral como 150px, mas em telas maiores, permitindo que ele se estenda para 25%. A barra lateral sempre ocupará 25% do espaço horizontal do pai até que 25% se torne menor que 150px.
Adicione isso como um valor de colunas de modelo de grade com o seguinte valor:
minmax(150px, 25%) 1fr. O item na primeira coluna (a barra lateral, nesse caso) recebe um minmax de 150px em 25%, e o segundo item (a seção main aqui) ocupa o restante do espaço como uma única faixa 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pilha de panquecas: grid-template-rows: auto 1fr auto
Ao contrário de "Desconstruído", este exemplo não envolve os filhos quando o tamanho da tela muda. Esse layout, que geralmente é chamado de rodapé fixo, é usado em sites e apps para dispositivos móveis (geralmente o rodapé é uma barra de ferramentas) e sites (os aplicativos de página única geralmente usam esse layout global).
Ao adicionar display: grid ao componente, você terá uma grade de coluna única, mas a área principal terá a mesma altura do conteúdo com o rodapé abaixo dela.
Para fixar o rodapé na parte inferior, adicione:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Isso define o conteúdo do cabeçalho e do rodapé para assumir automaticamente o tamanho dos filhos e aplica o espaço restante (1fr) à área principal, enquanto a linha de tamanho auto terá o tamanho mínimo do conteúdo dos filhos. Assim, à medida que esse conteúdo aumentar, a própria linha aumentará para se ajustar.
05. Layout clássico do Santo Graal: grid-template: auto 1fr auto / auto 1fr auto
Para esse layout clássico do Santo Graal, há um cabeçalho, um rodapé, uma barra lateral esquerda, uma barra lateral direita e um conteúdo principal. É semelhante ao layout anterior, mas agora com barras laterais.
Para escrever essa grade inteira com uma única linha de código, use a propriedade grid-template. Isso permite que você defina linhas e colunas ao mesmo tempo.
O par de propriedade e valor é: grid-template: auto 1fr auto / auto 1fr auto. A barra entre a primeira e a segunda listas separadas por espaços é a quebra entre as linhas e colunas.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Como no último exemplo, em que o cabeçalho e o rodapé tinham conteúdo dimensionado automaticamente, aqui a barra lateral esquerda e direita são dimensionadas automaticamente com base no tamanho intrínseco dos filhos. No entanto, desta vez ele tem o tamanho horizontal (largura) e não vertical (altura).
06. Grade de 12 períodos: grid-template-columns: repeat(12, 1fr)
A seguir, temos outro clássico: a grade de 12 períodos. É possível escrever grades em CSS rapidamente com a função repeat(). Usando: repeat(12, 1fr); para as colunas de modelo de grade resulta em 12 colunas cada uma de 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Agora que você tem uma grade de controle de 12 colunas, podemos colocar nossos filhos na grade. Uma maneira de fazer isso é colocá-los usando linhas de grade. Por exemplo, grid-column: 1 / 13 abrangeria todo o percurso da primeira linha à última (13a) e abrangeria 12 colunas. grid-column: 1 / 5; abrangeria os quatro primeiros.
Outra maneira de escrever isso é usando a palavra-chave span. Com span, você define a linha inicial e quantas colunas serão abrangidas a partir desse ponto de partida. Nesse caso, grid-column: 1 / span 12 seria equivalente a grid-column: 1 / 13, e grid-column: 2 / span 6, grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (repetição, automática, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Neste sétimo exemplo, combine alguns dos conceitos que você já aprendeu para criar um layout responsivo com filhos flexíveis e posicionados automaticamente. Muito legal. Os principais termos a serem lembrados aqui são repeat, auto-(fit|fill) e minmax()', que são memorizados pela sigla RAM.
Juntamente, o resultado será semelhante a este:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Você está usando a repetição, mas, desta vez, a palavra-chave auto-fit em vez de um valor numérico explícito. Isso permite o posicionamento automático desses elementos filhos. Esses filhos também têm um valor mínimo básico de 150px com um valor máximo de 1fr, o que significa que, em telas menores, eles vão ocupar a largura total de 1fr e, à medida que atingirem 150px de largura, vão começar a fluir para a mesma linha.
Com auto-fit, as caixas serão esticadas à medida que o tamanho horizontal excede 150 px para preencher todo o espaço restante. No entanto, se você mudar isso para auto-fill, eles não serão esticados quando o tamanho base na função minmax for excedido:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Linha: justify-content: space-between
Para o próximo layout, o ponto principal a ser demonstrado aqui é o justify-content: space-between, que coloca o primeiro e o último elemento filho nas bordas da caixa delimitadora, com o espaço restante distribuído uniformemente entre os elementos. Esses cards são colocados no modo de exibição no Flexbox, com a direção definida para a coluna usando flex-direction: column.
Isso coloca o título, a descrição e o bloco de imagem em uma coluna vertical dentro do card principal. Em seguida, a aplicação de justify-content: space-between ancora o primeiro elemento (título) e o último (bloco de imagem) nas bordas do flexbox. O texto descritivo entre eles é colocado com espaçamento igual em cada endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Fixando meu estilo: clamp(<min>, <actual>, <max>)
Vamos conhecer algumas técnicas que oferecem menos suporte ao navegador, mas que têm implicações realmente interessantes para os layouts e o design da interface responsiva. Nesta demonstração, você vai definir a largura usando um fecho da seguinte forma: width: clamp(<min>, <actual>, <max>).
Isso define um tamanho mínimo e máximo absolutos e um tamanho real. Com valores, isso pode ficar assim:
.parent {
width: clamp(23ch, 60%, 46ch);
}
O tamanho mínimo aqui é de 23ch ou 23 unidades de caracteres, e o tamanho máximo é de 46ch, 46 caracteres. As unidades de largura de caracteres são baseadas no tamanho da fonte do elemento, especificamente na largura do glifo 0. O tamanho "real" é de 50%, o que representa 50% da largura do pai desse elemento.
O que a função clamp() faz aqui é permitir que esse elemento retenha uma largura de 50% até que esse valor seja maior que 46ch (em janelas de visualização mais largas) ou menor que 23ch (em janelas de visualização menores). Conforme eu estico e encolhi o tamanho do card pai, a largura do card aumenta para o ponto máximo fixado e diminui para o mínimo fixado. Ela permanece centralizada no elemento pai, já que aplicamos outras propriedades para centralizá-lo. Isso permite layouts mais legíveis, já que o texto não ficará muito largo (acima de 46ch) ou muito apertado e estreito (menos de 23ch).
Essa também é uma ótima maneira de implementar a tipografia responsiva. Por exemplo, você poderia escrever: font-size: clamp(1.5rem, 20vw, 3rem). Nesse caso, o tamanho da fonte de um título sempre ficaria restrito entre 1.5rem e 3rem, mas aumentaria e diminuiria com base no valor real de 20vw para se ajustar à largura da janela de visualização.
Essa é uma ótima técnica para garantir a legibilidade com um valor de tamanho mínimo e máximo, mas lembre-se de que nem todos os navegadores modernos oferecem suporte a ela. Por isso, verifique se você tem substitutos e faça o teste.
10. Respeito ao aspecto: aspect-ratio: <width> / <height>
E, por fim, essa última ferramenta de layout é a mais experimental da lista. Ele foi recentemente introduzido no Chrome Canary no Chromium 84 e há um esforço ativo do Firefox para implementar isso, mas atualmente não está em nenhuma edição estável de navegadores.
Quero mencionar isso, no entanto, porque é um problema muito frequente. Isso é simplesmente manter a proporção de uma imagem.
Com a propriedade aspect-ratio, quando eu redimensiono o cartão, o bloco visual verde mantém essa proporção de 16 x 9. Vamos respeitar a proporção da aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Para manter uma proporção de 16 x 9 sem essa propriedade, você precisaria usar um hack de padding-top e dar um padding de 56.25% para definir uma proporção de cima para a largura. Em breve, teremos uma propriedade para isso a fim de evitar a invasão e a necessidade de calcular a porcentagem. Você pode criar um quadrado com a proporção 1 / 1, uma proporção de 2 para 1 com 2 / 1 e qualquer coisa necessária para que a imagem seja dimensionada com uma proporção de tamanho definida.
.square {
aspect-ratio: 1 / 1;
}
Embora esse recurso ainda esteja sendo lançado, é bom saber que ele resolve muitos problemas de desenvolvimento que enfrentei muitas vezes, especialmente quando se trata de vídeo e iframes.
Conclusão
Agradecemos por acompanhar essa jornada pelas 10 linhas poderosas de CSS. Para saber mais, assista o vídeo completo e teste as demonstrações.