Esta postagem destaca algumas linhas poderosas de CSS que fazem um trabalho pesado e ajudam você a criar layouts modernos e robustos.
Os layouts CSS modernos permitem que os desenvolvedores escrevam regras de estilo realmente significativas e robustas com apenas algumas teclas. A conversa acima e esta postagem subsequente analisam 10 linhas poderosas de CSS que fazem um trabalho pesado.
Para acompanhar ou testar essas demonstrações por conta própria, confira a incorporação do site acima ou acesse 1linelayouts.com.
01. Super Centralizado: place-items: center
Para o primeiro layout de "linha única", vamos resolver o maior mistério de todo o CSS: centralizar as coisas. Quero que você saiba que é mais fácil do que imagina com o place-items: center.
Primeiro, especifique grid como o método display e depois escreva place-items: center no mesmo elemento. place-items é uma forma abreviada de definir align-items e justify-items ao mesmo tempo. Ao definir como center, align-items e justify-items são definidos como center.
.parent {
display: grid;
place-items: center;
}
Isso permite que o conteúdo seja perfeitamente centralizado no elemento pai, independente do tamanho intrínseco.
02. Panqueca desconstruída: flex: <grow> <shrink> <baseWidth>
Em seguida, temos a panqueca desconstruída. Esse é um layout comum para sites de marketing, por exemplo, que podem ter uma linha de três itens, geralmente com uma imagem, um título e um texto que descreve alguns recursos de um produto. Em dispositivos móveis, queremos que eles se empilhem bem e se expandam à medida que aumentamos o tamanho da tela.
Ao usar o Flexbox para esse efeito, você não precisa de consultas de mídia para ajustar o posicionamento desses elementos quando a tela é redimensionada.
A abreviação flex significa: flex: <flex-grow> <flex-shrink> <flex-basis>.
Por isso, se você quiser que as caixas preencham o tamanho <flex-basis>, diminuam em tamanhos menores, mas não estiquem para preencher qualquer espaço adicional, escreva: flex: 0 1 <flex-basis>. Nesse caso, seu <flex-basis> é 150px, então ele fica assim:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Se você quiser que as caixas se estiquem e preencham o espaço ao passar para a próxima linha, defina <flex-grow> como 1. Assim:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Agora, à medida que você aumenta ou diminui o tamanho da tela, esses itens flexíveis diminuem e aumentam.
03. A barra lateral diz: grid-template-columns: minmax(<min>, <max>) …)
Esta demonstração usa a função minmax para layouts de grade. Aqui, estamos definindo o tamanho mínimo da barra lateral como 150px, mas em telas maiores, permitindo que ela se estenda até 25%. A barra lateral sempre vai ocupar 25% do espaço horizontal do elemento pai até que esse 25% fique menor que 150px.
Adicione isso como um valor de "grid-template-columns" com o seguinte valor:
minmax(150px, 25%) 1fr. O item na primeira coluna (a barra lateral, neste 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 do Deconstructed Pancake, este exemplo não envolve os filhos quando o tamanho da tela muda. Normalmente chamado de rodapé fixo, esse layout é usado com frequência em sites e apps, em aplicativos móveis (o rodapé geralmente é uma barra de ferramentas) e em sites (aplicativos de página única costumam usar esse layout global).
Adicionar display: grid ao componente vai criar uma grade de coluna única, mas a área principal terá apenas a altura do conteúdo com o rodapé abaixo dele.
Para fazer com que o rodapé fique fixo na parte de baixo, 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. Já a linha dimensionada auto assume o tamanho do conteúdo mínimo dos filhos. Assim, à medida que o conteúdo aumenta de tamanho, a linha também cresce 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 o conteúdo principal. É semelhante ao layout anterior, mas agora com barras laterais.
Para escrever toda essa grade usando uma única linha de código, use a propriedade grid-template. Isso permite definir linhas e colunas ao mesmo tempo.
O par propriedade e valor é: grid-template: auto 1fr auto / auto 1fr auto. A barra entre a primeira e a segunda lista separada por espaços é a quebra entre linhas e colunas.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Assim como no último exemplo, em que o cabeçalho e o rodapé tinham conteúdo com dimensionamento automático, aqui as barras laterais esquerda e direita são dimensionadas automaticamente com base no tamanho intrínseco dos filhos. No entanto, desta vez, é o tamanho horizontal (largura) em vez de vertical (altura).
06. Grade de 12 extensões: grid-template-columns: repeat(12, 1fr)
Em seguida, temos outro clássico: a grade de 12 colunas. É possível escrever grades rapidamente em CSS com a função repeat(). Usar: repeat(12, 1fr); para as colunas do modelo de grade dá 12 colunas de 1fr cada.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Agora que você tem uma grade de faixa de 12 colunas, podemos colocar os filhos nela. Uma maneira de fazer isso é posicioná-los usando linhas de grade. Por exemplo, grid-column: 1 / 13 abrangeria da primeira à última linha (13ª) e 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 vão abranger 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 seria equivalente a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (repetição, automático, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Para este 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 termos principais a serem lembrados são repeat, auto-(fit|fill) e minmax()', que você pode lembrar pela sigla RAM.
No total, fica assim:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Você está usando "repita de novo", mas desta vez, usando 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 de base de 150px com um valor máximo de 1fr. Isso significa que, em telas menores, eles ocupam toda a largura de 1fr e, quando atingem 150px de largura cada um, começam a fluir para a mesma linha.
Com auto-fit, as caixas vão se esticar à medida que o tamanho horizontal exceder 150 px para preencher todo o espaço restante. No entanto, se você mudar 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. Alinhamento: justify-content: space-between
Para o próximo layout, o principal ponto a ser demonstrado aqui é justify-content: space-between, que coloca o primeiro e o último elementos filhos nas bordas da caixa delimitadora, com o espaço restante distribuído uniformemente entre os elementos. Esses cards são colocados em um modo de exibição Flexbox, com a direção definida como coluna usando flex-direction: column.
Isso coloca o título, a descrição e o bloco de imagens em uma coluna vertical dentro do card principal. Em seguida, a aplicação de justify-content: space-between ancora o primeiro (título) e o último (bloco de imagem) elementos nas bordas do flexbox, e o texto descritivo entre eles é colocado com espaçamento igual em cada endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Restringir Meu estilo: clamp(<min>, <actual>, <max>)
Aqui vamos falar sobre algumas técnicas com menos suporte do navegador, mas que têm implicações muito interessantes para layouts e design de interface responsiva. Nesta demonstração, você está definindo a largura usando clamp desta forma: width: clamp(<min>, <actual>, <max>).
Isso define um tamanho mínimo e máximo absoluto, além de um tamanho real. Com valores, isso pode ter a seguinte aparência:
.parent {
width: clamp(23ch, 60%, 46ch);
}
O tamanho mínimo é de 23ch ou 23 unidades de caracteres, e o tamanho máximo é de 46ch, 46 caracteres. As unidades de largura de caractere 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 elemento pai.
O que a função clamp() está fazendo aqui é permitir que esse elemento mantenha uma largura de 50% até que 50% seja maior que 46ch (em janelas de visualização mais amplas) ou menor que 23ch (em janelas de visualização menores). Você pode ver que, à medida que estico e encolho o tamanho do elemento pai, a largura do card aumenta até o ponto máximo fixado e diminui até o mínimo fixado. Ele permanece centralizado no elemento pai porque aplicamos outras propriedades para centralizá-lo. Isso permite layouts mais legíveis, já que o texto não fica muito largo (acima de 46ch) nem muito apertado e estreito (menos de 23ch).
Essa também é uma ótima maneira de implementar a tipografia responsiva. Por exemplo, você pode escrever: font-size: clamp(1.5rem, 20vw, 3rem). Nesse caso, o tamanho da fonte de um título sempre ficaria 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 ela não é compatível com todos os navegadores modernos. Portanto, verifique se você tem substitutos e faça testes.
10. Respeito à proporção: aspect-ratio: <width> / <height>
Por fim, essa última ferramenta de layout é a mais experimental de todas. Ele foi introduzido recentemente no Chrome Canary no Chromium 84, e o Firefox está trabalhando ativamente para implementar esse recurso, mas ele ainda não está disponível em nenhuma edição estável do navegador.
No entanto, quero mencionar isso porque é um problema muito frequente. Isso é apenas manter a proporção de uma imagem.
Com a propriedade aspect-ratio, à medida que redimensiono o card, o bloco visual verde mantém a proporção de 16 x 9. Estamos respeitando a proporção com 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 padding-top e dar a ele um padding de 56.25% para definir uma proporção de cima para largura. Em breve, teremos uma propriedade para evitar o hack e a necessidade de calcular a porcentagem. Você pode criar um quadrado com proporção 1 / 1, uma proporção de 2 para 1 com 2 / 1 e qualquer coisa que precise para que a imagem seja dimensionada com uma proporção de tamanho definida.
.square {
aspect-ratio: 1 / 1;
}
Embora esse recurso ainda esteja em desenvolvimento, é bom saber que ele resolve muitos problemas que eu mesmo já enfrentei, principalmente quando se trata de vídeo e iframes.
Conclusão
Agradecemos por acompanhar esta jornada com 10 linhas poderosas de CSS. Para saber mais, assista ao vídeo completo e teste as demonstrações.