Layout

Podcast do CSS - 009: layout

Imagine que você trabalha como desenvolvedor, e um colega designer entrega o design de um site novo. O design tem todos os tipos de layouts e composições interessantes: layouts bidimensionais que consideram a largura e a altura da janela de visualização, bem como layouts que precisam ser fluidos e flexíveis. Como decidir a melhor maneira de estilizá-los com CSS?

O CSS nos oferece várias maneiras de resolver problemas de layout, em um eixo horizontal, vertical ou até mesmo em ambos. Escolher o método certo de layout para um contexto pode ser difícil, e, muitas vezes, pode ser necessário mais de um método de layout para resolver o problema. Para ajudar com isso, nos próximos módulos, você aprenderá sobre os recursos exclusivos de cada mecanismo de layout de CSS para informar essas decisões.

Layout: uma breve história

No início da Web, designs mais complexos do que um simples documento foram dispostos com elementos <table>. A separação de HTML de estilos visuais ficou mais fácil quando o CSS foi amplamente adotado pelos navegadores no final dos anos 90. O CSS abriu as portas para que os desenvolvedores pudessem mudar completamente a aparência de um site sem nunca tocar no HTML. Esse novo recurso inspirou projetos como The CSS Zen Garden, que foi criado para demonstrar o poder do CSS e incentivar mais desenvolvedores a aprendê-lo.

O CSS evoluiu à medida que nossas necessidades de web design e tecnologia de navegador evoluíram. Você pode ler como o layout CSS e nossa abordagem evoluíram ao longo do tempo em este artigo de Rachel Andrew.

Layout: o presente e o futuro

O CSS moderno tem ferramentas de layout excepcionalmente poderosas. Temos sistemas dedicados de layout e vamos fazer uma análise geral do que temos à nossa disposição, antes de nos aprofundarmos no Flexbox e no Grid nos próximos módulos.

Noções básicas sobre a propriedade display

A propriedade display faz duas coisas. A primeira coisa que ele faz é determinar se a caixa à qual ela é aplicada funciona como inline ou em bloco.

.my-element {
  display: inline;
}

Os elementos inline se comportam como palavras em uma frase. Eles ficam lado a lado na direção em linha. Elementos como <span> e <strong> que normalmente são usados para definir o estilo de textos em elementos de elementos como <p> (parágrafo), ficam inline por padrão. Eles também preservam o espaço em branco ao redor.

Não é possível definir largura e altura explícitas em elementos inline. Qualquer margem e preenchimento no nível do bloco serão ignorados pelos elementos ao redor.

.my-element {
    display: block;
}

Os elementos do bloco não ficam lado a lado. Ele cria uma nova linha para si mesmo. A menos que tenha sido alterado por outro código CSS, um elemento de bloco será expandido para o tamanho da dimensão inline, portanto, abrangendo toda a largura no modo de escrita horizontal. A margem em todos os lados de um elemento de bloco será respeitada.

.my-element {
    display: flex;
}

A propriedade display também determina como os filhos de um elemento precisam se comportar. Por exemplo: definir a propriedade display como display: flex transforma o campo em uma caixa no nível do bloco; e também converte os filhos em itens flexíveis. Isso ativa as propriedades flexíveis que controlam o alinhamento, a ordem e o fluxo.

Flexbox e Grid

Há dois mecanismos principais de layout que criam regras de layout para vários elementos: flexbox e grid. Eles compartilham semelhanças, mas são projetados para resolver diferentes problemas de layout.

Flexbox

.my-element {
    display: flex;
}

O Flexbox é um mecanismo para layouts unidimensionais. o layout em um único eixo, horizontal ou verticalmente. Por padrão, o flexbox vai alinhar os filhos do elemento lado a lado, na direção em linha, e esticar na direção do bloco, para que tenham a mesma altura.

Os itens vão ficar no mesmo eixo e não serão agrupados quando ficarem sem espaço. Em vez disso, eles tentarão comprimir na mesma linha um do outro. Esse comportamento pode ser alterado usando as propriedades align-items, justify-content e flex-wrap.

O Flexbox também converte os elementos filhos em itens flexíveis. o que significa que é possível escrever regras sobre como eles se comportam dentro de um contêiner flexível. É possível alterar o alinhamento, a ordem e a justificativa de um item individual. Também é possível mudar a diminuição ou o crescimento dela usando a propriedade flex.

.my-element div {
    flex: 1 0 auto;
}

A propriedade flex é uma abreviação de flex-grow, flex-shrink e flex-basis. Você pode expandir o exemplo acima assim:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Os desenvolvedores fornecem essas regras de baixo nível para indicar ao navegador como o layout deve se comportar. quando contestados pelas dimensões do conteúdo e da janela de visualização. Isso o torna um mecanismo muito útil para o web design responsivo.

Grade

.my-element {
    display: grid;
}

A grade é semelhante ao flexbox em vários aspectos, mas é projetado para controlar layouts de vários eixos em vez de layouts de um único eixo (espaço vertical ou horizontal).

A grade permite escrever regras de layout em um elemento que tem display: grid, e introduziu alguns novos primitivos para o estilo de layout, como as funções repeat() e minmax(). Uma unidade de grade útil é a unidade fr, que é uma fração do espaço restante. É possível criar grades tradicionais de 12 colunas. com uma lacuna entre cada item, com três propriedades CSS:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

O exemplo acima mostra um layout de eixo único. Enquanto o flexbox trata principalmente os itens como um grupo, oferece controle preciso sobre o posicionamento em duas dimensões. Podemos definir que o primeiro item dessa grade ocupa duas linhas e três colunas:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

As propriedades grid-row e grid-column instruem o primeiro elemento na grade a abranger o início da quarta coluna. da primeira coluna e abranger até a terceira, a partir da primeira.

Layout do fluxo

Se não estiver usando grid ou flexbox, seus elementos sejam exibidos no fluxo normal. Há vários métodos de layout que podem ser usados para ajustar o comportamento e a posição dos itens quando o fluxo está normal.

Bloco em linha

Lembra como os elementos ao redor não respeitam a margem do bloco e o padding em um elemento inline? Com o inline-block, você pode fazer isso acontecer.

p span {
    display: inline-block;
}

O uso de inline-block fornece uma caixa com algumas das características de um elemento no nível do bloco, mas que ainda flua inline com o texto.

p span {
    margin-top: 0.5rem;
}

Variações

Se você tem uma imagem que fica em um parágrafo de texto, não seria útil se o texto ficasse em volta da imagem, como você veria em um jornal? É possível fazer isso com flutuações.

img {
    float: left;
    margin-right: 1em;
}

A propriedade float instrui um elemento a "flutuar". para a direção especificada. A imagem neste exemplo é instruída a flutuar para a esquerda, permitindo que elementos irmãos "se unam" em torno dele. É possível instruir um elemento a flutuar left, right ou inherit.

Layout de várias colunas

Se você tiver uma lista muito longa de elementos, como uma lista de todos os países do mundo, isso pode resultar em muita rolagem e tempo desperdiçado para o usuário. Isso também pode criar espaços em branco excessivos na página. Com o CSS de várias colunas, divida-o em várias colunas para ajudar nesses dois problemas.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

Isso divide automaticamente essa lista longa em duas colunas e adiciona uma lacuna entre as duas colunas.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

Em vez de definir o número de colunas em que o conteúdo é dividido, você também pode definir uma largura mínima desejada usando column-width. Conforme mais espaço fica disponível na janela de visualização, mais colunas serão automaticamente criadas e, à medida que o espaço for reduzido, colunas também serão reduzidos. Isso é muito útil em contextos de web design responsivo.

Posicionamento

Por último nesta visão geral dos mecanismos de layout é o posicionamento. A propriedade position muda a forma como um elemento se comporta no fluxo normal do documento. e como se relaciona com outros elementos. As opções disponíveis são relative, absolute, fixed e sticky, com o valor padrão static.

.my-element {
  position: relative;
  top: 10px;
}

Este elemento é deslocado 10 px para baixo com base em sua posição atual no documento, já que está posicionada em relação a si mesma. A adição de position: relative a um elemento também o torna o bloco contendo todos os elementos filhos com position: absolute. Isso significa que o filho será reposicionado nesse elemento específico, em vez do pai relativo superior, quando tem uma posição absoluta aplicada.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

Quando você define position como absolute, ele divide o elemento do fluxo de documento atual. Isso tem dois significados:

1. É possível posicionar esse elemento onde quiser, usando top, right, bottom e left no pai relativo mais próximo.
2. Todo o conteúdo ao redor de um elemento absoluto reorganiza para preencher o espaço restante deixado por ele.

Um elemento com um valor position de fixed se comporta de maneira semelhante a absolute, com o pai sendo o elemento raiz <html>. Os elementos de posição fixa permanecem ancorados no canto superior esquerdo com base nos valores top, right, bottom e left definidos.

É possível alcançar o modelo corrigidos aspectos do fixed e os aspectos mais previsíveis de respeito do fluxo de documentos de relative usando sticky Com esse valor, à medida que a janela de visualização passa pelo elemento, ela vai ficar ancorada aos valores top, right, bottom e left definidos.

Conclusão

O layout CSS oferece muitas opções e flexibilidade. Para se aprofundar ainda mais no poder do CSS Flexbox e Grid, continue nos próximos módulos.

Teste seu conhecimento

Teste seus conhecimentos sobre layout