Gerador de Flexbox e Grid CSS

Como usar o gerador de Flexbox e Grid

1. Escolhe um Layout: Flexbox ou Grid, ou parte de uma das Predefinições (Centrado, Barra de navegação, Cartões com quebra de linha, Barra lateral, Grelha de cartões responsiva, Holy grail, 12 colunas).
2. Define as propriedades do Contentor. Em flexbox: flex-direction e flex-wrap. Em grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items e grid-template-areas. Os dois modos partilham justify-content, align-items, align-content, row-gap (px) e column-gap (px).
3. Gere os Itens com Adicionar item, Remover item selecionado e Repor item selecionado. Clica num item da pré-visualização (ou chega lá com Tab e carrega em Enter) para o selecionar.
4. Edita o item selecionado: order e align-self nos dois modos, flex-grow, flex-shrink e flex-basis em flexbox, e grid-area, grid-column, grid-row e justify-self em grid.
5. Copia o Código CSS e o Código HTML correspondente com os respetivos botões Copiar.

Todos os controlos são campos de formulário normais, por isso o gerador funciona por completo só com o teclado. O CSS contém apenas as propriedades que alteraste em relação aos valores por omissão, o que o mantém curto, e os itens com definições idênticas partilham uma única regra (.item quando são todos iguais).

Flexbox em poucas palavras

O flexbox dispõe os itens ao longo de um eixo. flex-direction define o eixo principal (uma linha ou uma coluna); justify-content distribui os itens ao longo dele (center, space-between…) e align-items posiciona-os no eixo transversal. Com flex-wrap: wrap, os itens que não cabem passam para uma nova linha, e align-content distribui então essas linhas.

Cada item tem três propriedades de tamanho, normalmente escritas em conjunto como flex:

• flex-basis: o tamanho inicial (auto usa o conteúdo ou a width);
• flex-grow: quanto do espaço livre o item ocupa (0 = nenhum, 1 = uma parte igual);
• flex-shrink: quanto cede quando falta espaço (0 = nunca encolhe).

A predefinição Barra lateral mostra o padrão clássico: uma barra lateral com flex-basis: 200px e flex-shrink: 0, e uma área principal com flex-grow: 1.

CSS Grid em poucas palavras

O grid dispõe os itens em duas dimensões. grid-template-columns: repeat(3, 1fr) cria três colunas iguais; fr é uma fração do espaço livre. repeat(auto-fill, minmax(120px, 1fr)) cria tantas colunas de pelo menos 120px quantas couberem, o que dá uma grelha de cartões responsiva sem qualquer media query.

Os itens preenchem as células por ordem, a não ser que os posiciones: grid-column: span 2 faz um item ocupar duas colunas, e grid-column: 1 / -1 estica-o por toda a linha.

grid-template-areas permite desenhar o layout com nomes. Escreve uma fila por linha, por exemplo header header e depois nav main, e dá aos itens grid-area: header ou grid-area: main. Um ponto marca uma célula vazia. Todas as filas precisam do mesmo número de células e cada nome tem de formar um retângulo; caso contrário, a ferramenta avisa-te.