Como criar um layout sem margens usando a grade CSS

O termo “sem margens” vem do design de impressão. Um layout sem margens inclui imagens e outras seções que cobrem toda a largura da página. Como o conteúdo “sangra” nas bordas da página, não há preenchimento, margem ou borda em torno das seções sem margens.

Os designs sem margens se tornaram populares na web com o advento dos layouts de uma coluna. Esses layouts têm como objetivo melhorar a legibilidade, removendo todas as distrações, incluindo barras laterais, de todo o conteúdo principal.

Neste tutorial, mostraremos como criar um layout de sangramento completo responsivo usando grade CSS. Para demonstrar, criaremos o seguinte layout sem margens com dois tipos de blocos sem margens: uma imagem sem margens e uma blockquote sem margens.

Orientaremos você nas etapas a seguir com exemplos detalhados:

1. Crie o HTML para um layout sem margens
2. Adicione o CSS sem grade
3. Definir o contêiner de grade CSS
4. Faça o layout dos itens de grade CSS
5. Definir a largura do blockquote
6. Layout sem margens com grade CSS: o código CSS final
7. Por que a grade CSS é a melhor solução para criar o layout sem margens

A imagem é extraída da API de origem Unsplash e o texto é gerado usando o gerador Coffee Ipsum para dar ao tutorial um impulso de cafeína.

Aqui está uma captura de tela do layout final. Você também pode testá-lo ao vivo em CodePen e meu site .

Vamos direto ao código

1. Crie o HTML para um layout sem margens

Começaremos com o código HTML. A classe .container será o contêiner da grade e seus elementos filhos serão os itens da grade na grade CSS. Também adicionaremos uma classe .full-bleed aos elementos que desejamos abranger por toda a tela-aqui, essa é a imagem e a citação em bloco, mas você pode adicionar outros tipos de seções sem margens para o layout também.

Como você pode ver abaixo, o div ao redor do blockquote também tem uma classe .quote-wrapper . O único objetivo desta classe é adicionar algum estilo (por exemplo, um fundo escuro) às blockquotes sem margens.

Também removi o Coffee Ipsum e o texto blockquote para obter uma visão mais simples:

 & lt; body & gt; & lt; div class="contêiner"& gt; & lt; h1 & gt; Melhor cafeteria da cidade & lt;/h1 & gt; & lt; p & gt;... & lt;/p & gt; & lt; p & gt;... & lt;/p & gt; & lt; p & gt;... & lt;/p & gt; & lt; img class="full-bleed"src="https://source.unsplash.com/NT3qP7WbmzE"alt="Melhor cafeteria"& gt; & lt; p & gt;... & lt;/p & gt; & lt; p & gt;... & lt;/p & gt; & lt; p & gt;... & lt;/p & gt; & lt; div class="wrapper de cotação sem margens"& gt; & lt; blockquote & gt; & amp; quot;... & amp; quot; & lt; cite & gt; & amp; ndash; Jonathan Swift & lt;/cite & gt; & lt;/blockquote & gt; & lt;/div & gt; & lt; p & gt;... & lt;/p & gt; & lt; p & gt;... & lt;/p & gt; & lt; p & gt;... & lt;/p & gt; & lt;/div & gt;
& lt;/body & gt;

2. Adicione o CSS sem grade

Vamos começar o CSS adicionando alguns estilos básicos. Vou usar alguns estilos muito simples, mas você pode adicionar outros mais sofisticados, se quiser.

: root { tamanho da fonte: 16px;
}
corpo { família da fonte: sans-serif; dimensionamento da caixa: caixa de borda; margem: 0; preenchimento: 0;
}
.quote-wrapper { plano de fundo: # 111;
}
bloco de citação { altura da linha: 1,6; cor: #fff; tamanho da fonte: 1.8rem; margem: 0 automático; alinhamento de texto: centro; preenchimento: 3rem 1.5rem;
}
cite { espaço em branco: nowrap;
}

3. Defina o contêiner de grade CSS

Para criar um layout sem margens usando a grade CSS, vamos configurar uma grade simples que consiste em três colunas de grade. Para as seções sem margens, o conteúdo será restringido dentro da coluna do meio. Para as seções sem margens, ele se estenderá por todas as três colunas.

.container { display: grade; colunas de modelo de grade: 1fr min (80%, 43,75rem) 1fr;
}

Especificamos a largura das colunas com o grid-template propriedade-columns . Para tornar a grade responsiva, usamos o min () Função matemática, que calcula o valor de duas ou mais expressões, as compara e usa a menor delas.

A regra min (80%, 43.75rem) acima usa 80% para a coluna do meio até 80% da largura da janela de visualização é menor que 43.75rem (que é igual a 700px (43,75x16) quando o tamanho da fonte raiz é 16px ). Acima disso, ele usa o valor estático 43.75rem .

Como resultado, o conteúdo do texto nunca será mais largo do que 700px , mesmo em telas grandes. E em telas pequenas, haverá uma quantidade razoável de espaço em branco em ambos os lados (você também pode usar 90% se quiser uma coluna do meio mais larga em telas pequenas).

A unidade fr divide o espaço restante proporcionalmente. Portanto, definimos a primeira e a terceira colunas como 1fr para atribuir a mesma parte a cada uma.

4. Organize os itens da grade CSS

Em nossa grade CSS, temos dois tipos de itens de grade: sem margens e sem margens. Vamos fazer o layout de ambos usando a grade-coluna propriedade que define a localização de um item da grade dentro das colunas da grade.

Os itens sem margens (os cabeçalhos e parágrafos na demonstração) usarão apenas a segunda coluna da grade, enquanto os itens sem margens se estenderão por todas as três colunas, dentro da primeira e quarta linhas da grade (quando grid-column tem dois valores separados por uma barra, os valores referem-se às linhas da grade).

.container & gt;: não (.full-sangrar) { grade-coluna: 2;
}
.sangramento total { largura: 100%; grade-coluna: 1/4;
}

Também adicionamos a regra width: 100% às seções sem margens para fazer com que as imagens sem margens sejam esticadas quando necessário (por exemplo, quando a tela é mais larga do que a imagem). Usando essas duas regras juntas, a imagem será esticada de maneira semelhante à regra background-size: cover .

5. Defina a largura do blockquote

Quando se trata de blockquote, a seção full-bleed não é

, mas seu elemento pai

. Portanto, precisamos definir um valor de largura para o blockquote em si para fazer o layout parecer bom.

Usaremos as mesmas dimensões da segunda coluna da grade. Desta forma, o blockquote terá a mesma largura que o conteúdo do texto acima e abaixo dele.

 blockquote { largura: min (80%, 43,75 rem);
}

6. Layout sem margens com grade CSS: o código CSS final

Isso é tudo que há para fazer! Nosso layout de grade CSS sem margens está concluído. Este é o código CSS final:

: root { tamanho da fonte: 16px;
}
corpo { família da fonte: sans-serif; dimensionamento da caixa: caixa de borda; margem: 0; preenchimento: 0;
}
.container { display: grade; colunas de modelo de grade: 1fr min (80%, 43,75rem) 1fr;
}
.container & gt;: não (.full-sangrar) { grade-coluna: 2;
}
.sangramento total { largura: 100%; grade-coluna: 1/4;
}
.quote-wrapper { plano de fundo: # 111;
}
bloco de citação { altura da linha: 1,6; cor: #fff; tamanho da fonte: 1.8rem; margem: 0 automático; largura: min (80%, 43,75 rem); alinhamento de texto: centro; preenchimento: 3rem 1.5rem;
}
cite { espaço em branco: nowrap;
}

7. Por que a grade CSS é a melhor solução para criar o layout sem margens

Neste tutorial, criamos um layout sem margens usando a grade CSS. No entanto, existem outras maneiras de criar esse tipo de layout também.

A solução sem grade mencionada com mais frequência é usar a regra margin: auto; para as seções sem sangramento total e max-width: 100% para o os sem margens da seguinte maneira:

.container & gt;: não (.full-sangrar) { largura máxima: 43,75 rem; margem: automático;
}
.sangramento total { largura máxima: 100%;
}

Embora esta solução pareça mais simples no início, ela pode apresentar problemas de dimensionamento em telas pequenas e grandes.

Em telas de celular, as margens esquerda e direita desaparecerão em torno do conteúdo sem margens abaixo de um determinado tamanho de janela de visualização, então você terá que usar uma consulta de mídia para lidar com esse problema. Por exemplo, você pode adicionar um preenchimento esquerdo e direito ao redor das seções sem margens em janelas de visualização pequenas.

Em telas grandes e extragrandes, quando a janela de visualização é mais larga do que a imagem, as imagens sem margens não são esticadas na tela. Portanto, você terá que carregar diferentes tamanhos da mesma imagem para diferentes tamanhos de janela de visualização usando o elemento HTML ou use uma imagem super grande para todos os tamanhos de janela de visualização, o que não é o melhor para desempenho em dispositivos pequenos.

Uma grande vantagem da grade CSS é que você pode controlar o comportamento do espaço em branco ao redor e das seções sem margens fazendo uso das colunas subjacentes e das regras CSS correspondentes.

Usando a grade CSS, você também pode adicionar mais de uma coluna às seções sem margens. Isso pode ser útil se você deseja adicionar conteúdo extra ao seu layout, como caixas de informações, um sumário, widgets menores ou anúncios in-post.

Conclusão

A grade CSS é frequentemente considerada uma técnica usada para layouts complexos, mas nem sempre precisa ser assim.

Também podemos usá-lo para muitas coisas mais simples, como criar um layout sem margens que consiste em seções de conteúdo com diferentes valores de largura.

A grade CSS também evita o uso de consultas de mídia, pois podemos usar unidades versáteis, como funções matemáticas e a unidade fr , para adaptar as dimensões dos itens da grade a diferentes tamanhos de viewport. No geral, a falta de consultas de mídia também reduz o tamanho de nosso arquivo CSS, o que melhora o tempo de carregamento da página e o desempenho do front-end.

A postagem Como criar um layout sem margens usando grade CSS apareceu primeiro no LogRocket Blog .

Source link

Categories: UncategorizedWordpress

Tags: wordpress

---