Générateur CSS Grid

Créer des mises en page CSS Grid

Colunas

Linhas

Grid Template Columns

Grid Template Rows

Column Gap (px)

Row Gap (px)

Justify Items

Align Items

Número de Itens

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px 10px;
  justify-items: stretch;
  align-items: stretch;
}

Propriedades do Container

display: grid

grid-template-columns: repeat(3, 1fr)

grid-template-rows: repeat(2, 1fr)

gap: 10px 10px

justify-items: stretch

align-items: stretch

Exemplos Úteis

Layout responsivo: repeat(auto-fit, minmax(200px, 1fr))

Colunas específicas: 200px 1fr 2fr

Linhas automáticas: repeat(auto-fill, 100px)

Continuez à explorer

Outils qui vont bien avec ce que vous utilisez :

Aire de jeu Flexbox

Visualiser et apprendre CSS Flexbox de manière interactive

Générateur d'animation CSS

Créer des animations CSS avec keyframes et aperçu en temps réel

Voir tous les outils

Vous avez aimé cet outil ? Explorez-en d'autres !

Explorer tous les outils