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

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

Item Size:使い方・FAQ

Generated HTML

<div class="grid-container">

</div>

Generated CSS

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

/* 子要素の共通スタイル（プレースホルダー） */
.grid-container > div {
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .grid-container > div {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}