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 conversa 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 todo o CSS: centralizar as 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 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 centralizado perfeitamente no layout pai, independentemente do tamanho intrínseco.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Em seguida, temos a panqueca desconstruída! Este é 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, em seguida, texto descrevendo algumas características de um produto. Em dispositivos móveis, queremos que eles sejam empilhados e abertos conforme aumentamos o tamanho da tela.
Ao usar o Flexbox para esse efeito, você não vai precisar de consultas de mídia para ajustar a posição 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 com o tamanho <flex-basis>, encolhidas em tamanhos menores, mas não esticadas para preencher qualquer espaço adicional, escreva: flex: 0 1 <flex-basis>. Nesse caso, <flex-basis> é 150px, então fica assim:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Se você quer que as caixas se estiquem e preencham o espaço à medida que são transferidas para a próxima linha, defina <flex-grow> como 1. Assim:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Agora, ao aumentar ou diminuir 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 aproveita 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 ela se estenda até 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 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) 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, esse exemplo não envolve os filhos quando o tamanho da tela muda. Esse layout, geralmente conhecido como rodapé fixo, é usado com frequência em sites, apps e 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 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. Enquanto isso, a linha do tamanho auto assume o tamanho do conteúdo mínimo dos filhos. À medida que o conteúdo aumenta, a 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 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 toda a grade usando uma única linha de código, use a propriedade grid-template. Isso permite que você defina as linhas e colunas ao mesmo tempo.
O par de propriedade e valor é: grid-template: auto 1fr auto / auto 1fr auto. O caractere de barra invertida entre a primeira e a segunda listas separadas por espaços é a quebra entre 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 com tamanho 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 períodos: grid-template-columns: repeat(12, 1fr)
Em seguida, temos outro clássico: a grade de 12 spans. É possível escrever rapidamente grades no CSS 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 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 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 de início e quantas colunas serão geradas a partir desse ponto. 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ático, min-max): 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 você se lembra pelo acrônimo RAM.
O resultado final é 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 a colocação automática desses elementos filhos. Esses filhos também têm um valor mínimo de base 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 atingem 150px de largura cada, começam a fluir na mesma linha.
Com auto-fit, as caixas vão se esticar à medida que o tamanho horizontal ultrapassar 150 px para preencher todo o espaço restante. No entanto, se você mudar para auto-fill, elas não vão se esticar quando o tamanho base na função minmax for excedido:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up: justify-content: space-between
Para o próximo layout, o ponto principal 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. Para esses cards, eles 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 imagem em uma coluna vertical dentro do card pai. Em seguida, a aplicação de justify-content: space-between ancora os elementos primeiro (título) e último (bloco de imagem) nas bordas do flexbox, e o texto descritivo entre eles é colocado com espaçamento igual a 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 a navegadores, mas que têm implicações muito interessantes para layouts e design de interface responsivo. 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, pode ser algo como:
.parent {
width: clamp(23ch, 60%, 46ch);
}
O tamanho mínimo é 23ch ou 23 unidades de caracteres, e o tamanho máximo é 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 principal do 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). Você pode notar que, à medida que eu estiro e reduzo o tamanho principal, a largura do card aumenta até o ponto máximo e diminui até o mínimo. Ele permanece centralizado no pai, já que aplicamos propriedades adicionais para centralizá-lo. Isso permite layouts mais legíveis, já que o texto não fica muito largo (acima de 46ch) ou muito comprimido 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 mínimo e máximo de tamanho, mas lembre-se de que ela não é compatível com todos os navegadores modernos. Portanto, tenha alternativas e faça testes.
10. Respeito pela proporção: aspect-ratio: <width> / <height>
E, por fim, essa última ferramenta de layout é a mais experimental da lista. Ele foi introduzido recentemente no Chrome Canary no Chromium 84, e o Firefox está fazendo esforços para implementar essa funcionalidade, mas ela ainda não está em nenhuma edição estável do navegador.
No entanto, quero mencionar isso porque é um problema muito comum. 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. 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, use um hack padding-top e defina 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 em desenvolvimento, é bom saber que ele resolve muitos problemas de desenvolvedores que eu já enfrentei muitas vezes, principalmente quando se trata de vídeos e iframes.
Conclusão
Agradecemos por acompanhar esta jornada pelas 10 linhas poderosas do CSS. Para saber mais, assista o vídeo completo e teste as demonstrações.