IT業界の技術をメモ・情報公開できる

gridとflexでできる余白指定

登録日:2025-02-03   
css
gapプロパティーはFlexboxおよびCSS Gridで要素間のアキを設定できます。
1つ指定の場合は行間・列間を同一の値で指定
2つの場合は、1つ目が行間、2つ目が列間の値で指定
行間・列間を個別に指定する場合はそれぞれrow-gap、column-gapを使います。

例)
.test1{
display: flex;
gap: 20px;
}

.test2{
display: grid;
gap: 30px 20px;
}

.test3{
display: grid;
row-gap: 20px;
column-gap: 10px;
}

一覧に戻る