Grelha CSS ou Flexbox: Qual é o melhor para criar colunas?
Quando se trata de layouts CSS, as duas principais ferramentas à sua disposição são Grid e Flexbox. Embora ambas sejam fantásticas na criação de layouts, elas servem a propósitos diferentes e têm pontos fortes e fracos diferentes.
Compreenda os comportamentos distintos exibidos por cada método de disposição, bem como as circunstâncias em que devem ser utilizados.
Os diferentes comportamentos de CSS Flexbox e Grid
O processo acima mencionado pode ser transmitido de forma eficaz gerando um ficheiro index.html dentro do diretório escolhido e incorporando nele o snippet de código que se segue:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexbox vs Grid</h1>
<h2>Flexbox:</h2>
<div class="flex-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
<h2>Grid:</h2>
<div class="grid-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
</body>
</html>
Ambas as divisões englobam descendentes idênticos, permitindo assim a implementação de metodologias distintas em cada uma delas e facilitando a sua comparação.
Pode observar que o HTML incorpora um documento de texto estilizado designado por “style.css”. Construa este ficheiro específico no mesmo diretório que “index.html” e insira os desenhos subsequentes no seu interior:
body {
padding: 30px;
}
h1 {
color: #A52A2A;
}
h2 {
font-size: large;
}
div:not([class]) {
outline: 2px solid black;
padding: 0.5em;
}
A sua página deverá ter o seguinte aspeto:
Para transformar o elemento div inicial numa coluna flexível dentro de um ficheiro CSS, tudo o que é necessário é incorporar a marcação fornecida na folha de estilo. Isto irá efetivamente alterar a disposição do primeiro elemento div, utilizando as propriedades e atributos associados às propriedades CSS display e flex.
.flex-container {
display: flex;
}
Este é o resultado:
O contentor flex utiliza uma estratégia de disposição conhecida como flexbox, que organiza os seus filhos em linhas ou colunas horizontais que podem ser ajustadas dinamicamente para se adaptarem às dimensões da área de visualização. Esta capacidade de redimensionamento é fundamental para compreender os princípios do flexbox, que constitui a base da sua utilidade no web design.
Para mitigar potenciais problemas com colunas que transbordam dentro de um contentor flexível, recomenda-se a utilização da propriedade flex-wrap .
.flex-container {
display: flex;
flex-wrap: wrap;
}
A nova propriedade CSS flexbox permite uma utilização mais eficiente do espaço, permitindo que os elementos filhos fluam para várias linhas quando necessário, em vez de os fazer transbordar ou truncar como nas versões anteriores. Isto é conseguido através da implementação de um contentor flexível com um espaço livre disponível calculado com base no seu tamanho, que pode depois ser distribuído pelos seus elementos secundários de acordo com os respectivos tamanhos e prioridades definidos através das propriedades ‘flex-grow’, ‘flex-shrink’ e ‘flex-basis’.Ao permitir que estes elementos filhos se envolvam e continuem em linhas subsequentes quando o espaço disponível se torna insuficiente para que todos apareçam numa única linha, esta funcionalidade ajuda a otimizar as disposições e a evitar potenciais problemas de design que possam surgir devido a restrições de largura fixa.
Para obter uma disposição baseada em grelha para o segundo elemento , é possível utilizar as seguintes regras CSS:css.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;}A regra display: grid; aplica o modelo de disposição “grid” à classe .grid , permitindo-nos definir linhas e colunas dentro da mesma. A propriedade grid-template-columns especifica que queremos criar uma grelha de preenchimento automático com uma largura mínima de 200 pixels e uma largura máxima de 1 fração (o que significa que cada coluna ocupa tanto espaço quanto necessário). Finalmente, a propriedade grid-gap
.grid-container {
display: grid;
}
A declaração acima mencionada, por si só, não produz qualquer efeito, uma vez que o funcionamento padrão da grelha faz com que os seus elementos constituintes sejam dispostos verticalmente uns sobre os outros, por defeito.
Para fazer a transição de uma disposição em linhas para uma disposição em colunas, é necessário modificar o valor da propriedade grid-auto-flow , que tem como predefinição row . Ao alterar esta propriedade para coluna , os itens da grelha serão apresentados em colunas verticais em vez de linhas horizontais.
.grid-container {
display: grid;
grid-auto-flow: column;
}
Agora, eis o resultado:
Para designar com precisão o número pretendido de colunas por linha numa disposição em grelha, utilize a propriedade “grid-template-columns” em CSS.
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Para obter um layout com várias colunas de largura igual que se comporta de forma semelhante ao Flexbox quando se trata de envolver conteúdo, pode-se utilizar propriedades de design responsivo como “auto-fit”, “min-content” e “max-content”.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
A Flexbox e a Grelha são por vezes caracterizadas como sistemas de disposição unidimensional e bidimensional, respetivamente; no entanto, esta classificação é uma simplificação excessiva, uma vez que tanto a Flexbox como a Grelha têm a capacidade de criar disposições bidimensionais, apesar das suas diferenças de abordagem e limitações.
De facto, é fundamental regular a dimensionalidade singular da disposição. Por exemplo, tenha em conta a ilustração acima referida:
De facto, a consistência da coluna Grid é notável quando comparada com a variação observada nas linhas/colunas Flexbox.É importante reconhecer que cada linha/coluna individual dentro de um contentor flexível funciona independentemente uma da outra, resultando em potenciais discrepâncias de tamanho com base no conteúdo que contêm. Consequentemente, estes elementos podem ser vistos como blocos distintos em vez de colunas tradicionais.
A grelha funciona de forma distinta, estabelecendo uma matriz bidimensional em que as colunas são predefinidas para permanecerem fixas. Por exemplo, um elemento com conteúdo conciso deve apresentar dimensões congruentes com outro que apresente texto extenso, como ilustrado na imagem em anexo.
Essencialmente, a grelha CSS proporciona uma abordagem mais organizada à conceção de esquemas em comparação com a flexbox, que oferece maior adaptabilidade e capacidade de resposta na criação de interfaces de utilizador dinâmicas. Os monikers destes dois sistemas de layout proeminentes não poderiam ser mais apropriados.
Quando utilizar o Flexbox
Prefere utilizar as dimensões inerentes de colunas e linhas individuais com base no seu conteúdo, ou exercer um controlo estruturado sobre elas a partir do ponto de vista de um elemento principal? Se optar pela primeira opção, a Flexbox apresenta uma solução ideal.
Para ilustrar este conceito, vamos examinar um cenário hipotético em que temos uma barra de navegação alinhada horizontalmente situada dentro das etiquetas HTML de abertura e fecho. O código atualizado seria semelhante ao seguinte:
<h1>Flexbox vs. Grid</h1>
<header class="flex">
<h2>Flexbox</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
<header class="grid">
<h2>Grid</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
Modifique o conteúdo da folha de estilos em cascata, utilizando o trecho de código fornecido como substituto de qualquer marcação existente.
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
header {
--border-width: 5px;
border: var(--border-width) solid black;
margin-bottom: 30px;
}
header > *:first-child {
border: var(--border-width) solid #FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid #90EE90;
}
Aqui está o resultado:
Para criar uma navegação flexível com os primeiros itens de menu empilhados verticalmente em ecrãs mais pequenos e apresentados como duas colunas de igual largura em ecrãs maiores utilizando CSS Grid, adicione o seguinte código à sua folha de estilos:css/* Ecrãs pequenos // Ecrãs maiores */And for the second menu item in a list style, you can use the same
.flex .nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid .nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Determine a eficácia de cada abordagem comparando os seus resultados:
De facto, a representação visual ilustra como a Flexbox satisfaz o requisito de alinhar elementos lado a lado, preservando as suas dimensões naturais. Por outro lado, a Grelha, com o seu tamanho de célula pré-determinado, pode não proporcionar uma aparência óptima quando aplicada a ligações de texto simples.
Quando utilizar a grelha CSS
A grelha oferece uma vantagem distinta em situações em que é pretendida uma estrutura fixa para elementos filhos dentro do seu contentor principal.Por exemplo, a organização de uma série de cartões com largura uniforme, independentemente da variação do tamanho do conteúdo, pode ser efetivamente conseguida através da Grelha.
Substitua a marcação nas etiquetas pelo fragmento de código fornecido, que contém uma série de instruções para criar e estilizar páginas Web utilizando HTML e CSS.
<h1>Flexbox vs. Grids</h1>
<section class="cards">
<h2>Some cards</h2>
<div class="columns">
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">A Longer Title Than Others</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
</div>
</section>
Adicione este CSS:
.columns {
display: flex;
gap: 1em;
}
article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
A demonstração inicial utiliza um layout Flexbox para comparação visual com o Layout de grade. O resultado apresentado é o seguinte:
De facto, é de notar que a coluna final apresenta um tamanho maior devido às suas medidas inerentes, que o sistema de disposição Flexbox gere eficazmente. No entanto, para renderizar todas as colunas com largura uniforme utilizando o Flexbox, é necessário anular esta medida inerente utilizando a seguinte metodologia:
.columns > * {
flex: 1;
}
As disposições em grelha são uma solução eficaz quando é necessária uma disposição específica dos elementos. Especificando o número de colunas, é possível obter facilmente o alinhamento desejado sem a necessidade de usar estilos CSS complexos ou manipulações de JavaScript.
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Aqui está o resultado:
A utilização da grelha desta forma apresenta um benefício adicional, uma vez que permite aos pais manter o controlo sobre o layout dos filhos. Isto significa que os elementos filhos novos ou removidos não irão perturbar a estrutura geral.
Quando é que se deve usar Grid ou Flexbox?
Versão avançada em inglês:O layout de grade oferece uma estrutura bem organizada para o elemento pai, fornecendo larguras de coluna consistentes que permanecem uniformes em diferentes tamanhos de conteúdo.
O Flexbox oferece um layout adaptável que se baseia nas dimensões inerentes dos seus componentes, tornando-o adequado para situações em que a flexibilidade e a capacidade de resposta são fundamentais.