Esta postagem destaca algumas linhas poderosas de CSS que fazem um trabalho pesado e ajudam a criar layouts modernos e robustos.
Os layouts modernos do CSS permitem que os desenvolvedores escrevam regras de estilo realmente significativas e robustas com apenas alguns toques no teclado. A palestra acima e esta postagem examinam 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 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. Quero que você 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 pai, independentemente do tamanho intrínseco.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Agora temos a panqueca desmontada! 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 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, comumente chamado de footer fixo, é usado com frequência para sites e apps, em aplicativos para dispositivos móveis (o rodapé geralmente é uma barra de ferramentas) e sites (os aplicativos de página única costumam usar esse layout global).
Adicionar display: grid ao componente vai gerar uma grade de coluna única, mas a área principal vai ter a mesma altura do conteúdo com o rodapé abaixo.
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. Assim, à 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
Nesse layout clássico, 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 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. A barra 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 espaços: grid-template-columns: repeat(12, 1fr)
Em seguida, temos outro clássico: a grade de 12 spans. É possível escrever rapidamente grades em CSS com a função repeat(). Usando: repeat(12, 1fr); para as colunas do modelo de grade, você tem 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 12 colunas, podemos colocar os filhos na grade. Uma maneira de fazer isso é posicioná-los usando linhas de grade. Por exemplo, grid-column: 1 / 13 vai da primeira linha até a última (13ª) e abrange 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 seria equivalente a 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 "repeat" novamente, mas desta vez, com a palavra-chave auto-fit em vez de um valor numérico explícito. Isso ativa 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, 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 são esticadas à medida que o tamanho horizontal ultrapassa 150 px para preencher todo o espaço restante. No entanto, se você mudar isso 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. Como usar o My Style: 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ê está definindo a largura usando o limite da seguinte maneira: 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.
A função clamp() está permitindo que esse elemento mantenha uma largura de 50% até 50% ser maior que 46ch (em janelas de visualização mais amplas) 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>
Por fim, essa última ferramenta de layout é a mais experimental do grupo. 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, conforme eu redimensiono o card, 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, você precisa usar um hack padding-top e definir um padding de 56.25% para definir uma proporção de cima para a largura. Em breve, vamos ter uma propriedade para evitar o hack e a necessidade de calcular a porcentagem. Você pode fazer um quadrado com proporção 1 / 1, uma proporção de 2 para 1 com 2 / 1 e qualquer coisa que você 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 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 de CSS. Para saber mais, assista o vídeo completo e teste as demonstrações.