Crie layouts CSS Flexbox e Grid visualmente com visualização em tempo real. Controle as propriedades dos contêineres e itens e, em seguida, copie o CSS pronto para uso.
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 8px;
/* all items use defaults */
O CSS Flexbox e o CSS Grid são os dois principais sistemas de layout do CSS moderno. O Flexbox lida com layouts unidimensionais - linhas ou colunas - e é ideal para barras de navegação, barras de ferramentas e alinhamento de componentes. O CSS Grid lida com layouts bidimensionais, utilizando linhas e colunas simultaneamente, o que o torna a ferramenta certa para layouts de página, grades de cartões e estruturas complexas de interface do usuário. Ambos os sistemas utilizam um modelo de contêiner/item: as propriedades do contêiner definem o layout geral, enquanto as propriedades dos itens individuais controlam como eles se encaixam nele.
Alterne entre os modos Flexbox e Grid usando as abas na parte superior. Ajuste as propriedades do contêiner para definir a direção geral do layout, o quebra automático, o alinhamento e os espaços. Selecione um item clicando em seu marcador numerado ou clicando diretamente na visualização e, em seguida, configure suas propriedades individuais. A visualização é atualizada em tempo real à medida que os valores são alterados. Copie os blocos CSS do Contêiner e CSS do Item e cole-os em sua folha de estilos.
A saída CSS dos grupos de itens substitui as definições por classe de item (.item-1, .item-2, etc.). Os itens que utilizam apenas os padrões do contêiner não geram saída - apenas os itens substituídos são listados. No modo Grid, os valores de extensão de colunas e linhas utilizam a sintaxe abreviada span N. O modelo repeat() é escrito como repeat(N, Xunit) para faixas de largura igual. Ajuste o seletor de unidade entre fr, px e % para atender às suas necessidades de layout.