日本語English

CSS Grid GeneratorCSSグリッドジェネレーター

ドラッグ操作でCSSグリッドレイアウトを視覚的に作成し、HTML/CSSコードを自動生成する無料のGridジェネレーター

HTML

<div class="grid-container">

</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  height: 500px;
}



@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .grid-container > * {
    grid-area: auto;
  }
}