Esta postagem destaca algumas linhas poderosas de CSS que fazem um trabalho pesado e ajudam você a criar layouts modernos robustos.
Os layouts CSS modernos permitem que os desenvolvedores escrevam regras de estilo realmente significativas e robustas com apenas alguns toques no teclado. A palestra acima e esta postagem subsequente examinam 10 linhas poderosas de CSS que fazem um trabalho 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 toda a área do CSS: a centralização. Saiba que é mais fácil do que você imagina com o place-items: center.
Primeiro, especifique grid como o método display e 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 são definidos como center.
.parent {
display: grid;
place-items: center;
}
Isso permite que o conteúdo seja perfeitamente centralizado no pai, independentemente do tamanho intrínseco.
02. A 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 imagem, título e texto descrevendo alguns recursos de um produto. Em dispositivos móveis, convém que eles fiquem bem empilhados e expandam à medida que aumentam 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 abreviatura flex significa: flex: <flex-grow> <flex-shrink> <flex-basis>.
Por isso, se você quiser que as caixas preencham o tamanho de <flex-basis>, reduza em tamanhos menores, mas sem esticar para preencher qualquer espaço adicional, escreva: flex: 0 1 <flex-basis>. Nesse caso, sua <flex-basis> é 150px e tem esta aparência:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Se você quer que as caixas estiquem e preencham o espaço conforme elas se ajustam à próxima linha, defina <flex-grow> como 1, para que fique assim:
.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>) …)
Essa 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 esse valor 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-o como um valor de colunas de modelo de grade com o seguinte valor:
minmax(150px, 25%) 1fr. O item na primeira coluna (neste caso, a barra lateral) 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 da "Panqueca desconstruída", este exemplo não une os filhos quando o tamanho da tela muda. Normalmente conhecido como rodapé fixo, esse layout costuma ser usado para sites, apps, apps para dispositivos móveis (o rodapé geralmente é uma barra de ferramentas) e sites (os aplicativos de página única geralmente usam esse layout global).
Adicionar display: grid ao componente fornecerá uma grade de coluna única. No entanto, a área principal terá a mesma altura que o conteúdo com o rodapé abaixo.
Para fixar o rodapé na parte inferior, adicione:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Isso configura o conteúdo do cabeçalho e rodapé para assumir automaticamente o tamanho dos filhos e aplica o espaço restante (1fr) à área principal, enquanto a linha com tamanho auto assume o tamanho do conteúdo mínimo dos filhos. Assim, à medida que o conteúdo aumenta, a própria linha cresce para se ajustar.
05 Layout clássico do Santo Graal: grid-template: auto 1fr auto / auto 1fr auto
Para esse layout clássico, há um cabeçalho, rodapé, barra lateral esquerda, barra lateral direita e conteúdo principal. O layout anterior é parecido com o anterior, mas agora com barras laterais!
Para escrever essa grade inteira usando uma única linha de código, use a propriedade grid-template. Isso permite definir as 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ço é a quebra entre linhas e colunas.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Como no último exemplo, onde o cabeçalho e o rodapé tinham conteúdo com tamanho automático, aqui a barra lateral esquerda e direita é dimensionada 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 períodos: grid-template-columns: repeat(12, 1fr)
Em seguida, temos outro clássico: a grade de 12 espaços. É possível escrever grades rapidamente no CSS com a função repeat(). Usando repeat(12, 1fr); para as colunas do modelo de grade, você terá 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 rastreamento de 12 colunas, podemos colocar os filhos na grade. Uma maneira de fazer isso é colocá-los usando linhas de grade. Por exemplo, grid-column: 1 / 13 abrangeria desde a primeira linha até a ú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, em seguida, quantas colunas abranger a partir desse ponto de partida. Nesse caso, grid-column: 1 / span 12 equivale a grid-column: 1 / 13, e grid-column: 2 / span 6 equivale a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07 RAM (Repetir, Automático, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
No 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-chave a serem lembrados aqui são repeat, auto-(fit|fill) e minmax()', que você lembra pela sigla RAM.
Ele tem esta aparência:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Você está usando a repetição novamente, 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 básico de 150px, com um valor máximo de 1fr, o que significa que, em telas menores, eles ocupam toda a largura de 1fr e, à medida que alcançam 150px de largura cada, começam a fluir para a mesma linha.
Com auto-fit, as caixas vão se esticar quando o tamanho horizontal exceder 150 px para preencher todo o espaço restante. No entanto, se você mudar isso para auto-fill, eles não serão ampliados quando o tamanho base na função minmax for excedido:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08 Linhas: justify-content: space-between
Para o próximo layout, o ponto principal a ser demonstrado aqui é justify-content: space-between, que posiciona o primeiro e o último elementos filhos nas bordas da caixa delimitadora, com o espaço restante distribuído de maneira uniforme entre os elementos. Esses cards são colocados no 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 imagem em uma coluna vertical dentro do card pai. Em seguida, aplicar justify-content: space-between ancora os primeiros elementos (título) e o último (bloco de imagem) às bordas do flexbox. O texto descritivo entre eles é colocado com o mesmo espaçamento para cada endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09 Fixando meu estilo: clamp(<min>, <actual>, <max>)
Aqui, vamos abordar algumas técnicas com menos suporte ao navegador, mas que têm algumas implicações realmente interessantes para layouts e design de interface responsiva. Nesta demonstração, você está definindo a largura usando um fecho: width: clamp(<min>, <actual>, <max>).
Isso define um tamanho mínimo, máximo absoluto e um tamanho real. Com valores, a aparência pode ser semelhante a esta:
.parent {
width: clamp(23ch, 60%, 46ch);
}
O tamanho mínimo aqui é de 23ch ou 23 blocos de caracteres, e o tamanho máximo é 46ch, de 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" é 50%, o que representa 50% da largura do elemento pai.
O que a função clamp() faz aqui é permitir que esse elemento retenha uma largura de 50% até que 50% seja maior que 46ch (em janelas de visualização mais largas) ou menor que 23ch (em janelas menores). Observe que, à medida que eu estexico e encolhi o tamanho do pai, a largura desse card aumenta até o ponto máximo fixado e diminui para o mínimo fixado. Ele vai continuar centralizado no pai, já que aplicamos propriedades adicionais para centralizá-lo. Isso permite layouts mais legíveis, já que o texto não será muito largo (acima de 46ch) nem muito apertado e estreito (menos de 23ch).
Essa também é uma ótima maneira de implementar tipografia responsiva. Por exemplo, é possível escrever: font-size: clamp(1.5rem, 20vw, 3rem). Nesse caso, o tamanho da fonte de um título sempre ficaria limitado 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 mais recentes. Portanto, use substitutos e faça seus testes.
10. Respeito ao aspecto: aspect-ratio: <width> / <height>
E, finalmente, a última ferramenta de layout é a mais experimental da lista. Ele foi apresentado recentemente ao Chrome Canary no Chromium 84. O Firefox está empenhado em fazer isso recentemente, mas ainda não está em nenhuma edição estável do navegador.
No entanto, quero mencionar isso, porque é um problema bastante comum. Isso é simplesmente manter a proporção de uma imagem.
Com a propriedade aspect-ratio, conforme redimensiono o card, o bloco visual verde mantém essa proporção de 16 x 9. Estamos respeitando a proporção com a aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Para manter uma proporção de 16 x 9 sem essa propriedade, você precisaria usar uma hacking padding-top e fornecer um padding de 56.25% para definir uma proporção de cima para largura. Em breve, teremos uma propriedade para isso, a fim de evitar a invasão e a necessidade de calcular a porcentagem. É possível fazer um quadrado com proporção de 1 / 1, uma proporção de 2 para 1 com 2 / 1 e qualquer coisa que você precisar para que essa imagem seja dimensionada com uma proporção de tamanho definida.
.square {
aspect-ratio: 1 / 1;
}
Embora esse recurso ainda esteja em desenvolvimento, é uma boa ideia saber mais sobre ele, já que ele resolve muitos problemas de desenvolvedores que já enfrentei muitas vezes, especialmente quando se trata de vídeo e iframes.
Conclusão
Agradecemos por seguir esta jornada pelas 10 poderosas linhas de CSS. Para saber mais, assista ao vídeo completo e teste as demonstrações por conta própria.