Gerador de CSS Grid

Gere visualmente código de layout CSS Grid

tools.grid-generator.cols: 3

tools.grid-generator.rows: 3

tools.grid-generator.colGap: 16px

tools.grid-generator.rowGap: 16px

tools.grid-generator.cssCode

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px 16px;
}

工具说明

Gerador de layout CSS Grid online para ajustar visualmente colunas, linhas, espaçamentos e áreas com prévia do layout em tempo real e saída de CSS. Ideal para design de páginas complexas.

css gridgrid布局layoutcolumnsrows