日本語English
ドラッグ操作でCSSグリッドレイアウトを視覚的に作成し、HTML/CSSコードを自動生成する無料のGridジェネレーター
<div class="grid-container"> </div>
.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;
}
}