CSSグリッド生成
CSS Grid生成の無料オンラインツール。ビジュアルエディターで行・列・ギャップを設定、レイアウトコードを自動生成。コードコピー可能。
1
2
3
4
5
6
7
8
9
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
justify-items: stretch;
align-items: stretch;
}
HTML コード
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
lockファイルはサーバーに送信されません
Ctrl+D を押してこのページをブックマークしてください
CSSグリッド生成ツールは、グリッドレイアウトを視覚的に設計する無料オンラインツールです。 行/列数、gap、セル配置をドラッグで設定しCSS Gridコードを自動生成します。 リアルタイムプレビュー対応。 ブラウザ処理、無料。