Bootstrapが使えない、使いたくない、そんな時に便利な＜CSS Grid＞

レスポンシブなページを作るときに便利な「Bootstrap」、簡単に短時間でページが作れます。

でもワードプレスのページを作成するときや簡単なレスポンシブなページを作るときなど「Bootstrap」が使えない、使いたくないときもあります。

そんな時には「CSS Grid」を使ってます。

「Bootstrap」は基本的にページを12分割します、「CSS Grid」には12分割などの制約はありませんがぺージを12分割すれば同じ感覚で使えるので便利。

12分割の基本CSSは

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2em;
  grid-row-gap: 2em;
}

.wrapper {

display: grid;

grid-template-columns: repeat(12, 1fr);

grid-gap: 2em;

grid-row-gap: 2em;

}

「Bootstrap」風に解説すると、、、。

基本CSS

display: grid;　・・・　Grid Layout の指定（宣言）

grid-template-columns: repeat(12, 1fr);　・・・　12分割のおまじない

grid-gap: 2em;　・・・　カラムの横方向すき間

grid-row-gap: 2em;　・・・　カラムの縦方向すき間

その他のオプション

grid-template-rows　・・・　グリッドトラックの縦方向のサイズリストを指定。レスポンシブで使う場合は指定しない場合が多い。

ブレークポイントは？

ヘッダー、メニュー、コンテンツ、フッターなどとクラス名を付けてクラス名ごとにブレークポイントを付けるのもひとつの方法ですが自分はグリッドごとにクラス目を3つ入れる方法でやってます。

自分の場合はこの方法がわかりやすいので（笑）

/* 横幅960px以上 */
@media (min-width: 960px) {
.grid-L-12 {
grid-column: span 12;
}
.grid-L-11 {
grid-column: span 11;
}
.grid-L-10 {
grid-column: span 10;
}
.grid-L-9 {
grid-column: span 9;
}
.grid-L-8 {
grid-column: span 8;
}
.grid-L-7 {
grid-column: span 7;
}
.grid-L-6 {
grid-column: span 6;
}
.grid-L-5 {
grid-column: span 5;
}
.grid-L-4 {
grid-column: span 4;
}
.grid-L-3 {
grid-column: span 3;
}
.grid-L-2 {
grid-column: span 2;
}
.grid-L-1 {
grid-column: span 1;
}
}
/* 横幅600px～959px */
@media (min-width: 600px) and (max-width: 959px)  {
.grid-M-12 {
grid-column: span 12;
}
.grid-M-11 {
grid-column: span 11;
}
.grid-M-10 {
grid-column: span 10;
}
.grid-M-9 {
grid-column: span 9;
}
.grid-M-8 {
grid-column: span 8;
}
.grid-M-7 {
grid-column: span 7;
}
.grid-M-6 {
grid-column: span 6;
}
.grid-M-5 {
grid-column: span 5;
}
.grid-M-4 {
grid-column: span 4;
}
.grid-M-3 {
grid-column: span 3;
}
.grid-M-2 {
grid-column: span 2;
}
.grid-M-1 {
grid-column: span 1;
}
}
/* 横幅599px以下 */
@media (max-width: 599px) {
.grid-S-12 {
grid-column: span 12;
}
.grid-S-11 {
grid-column: span 11;
}
.grid-S-10 {
grid-column: span 10;
}
.grid-S-9 {
grid-column: span 9;
}
.grid-S-8 {
grid-column: span 8;
}
.grid-S-7 {
grid-column: span 7;
}
.grid-S-6 {
grid-column: span 6;
}
.grid-S-5 {
grid-column: span 5;
}
.grid-S-4 {
grid-column: span 4;
}
.grid-S-3 {
grid-column: span 3;
}
.grid-S-2 {
grid-column: span 2;
}
.grid-S-1 {
grid-column: span 1;
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

/* 横幅960px以上 */

@media (min-width: 960px) {

.grid-L-12 {

grid-column: span 12;

}

.grid-L-11 {

grid-column: span 11;

}

.grid-L-10 {

grid-column: span 10;

}

.grid-L-9 {

grid-column: span 9;

}

.grid-L-8 {

grid-column: span 8;

}

.grid-L-7 {

grid-column: span 7;

}

.grid-L-6 {

grid-column: span 6;

}

.grid-L-5 {

grid-column: span 5;

}

.grid-L-4 {

grid-column: span 4;

}

.grid-L-3 {

grid-column: span 3;

}

.grid-L-2 {

grid-column: span 2;

}

.grid-L-1 {

grid-column: span 1;

}

/* 横幅600px～959px */

@media (min-width: 600px) and (max-width: 959px) {

.grid-M-12 {

grid-column: span 12;

}

.grid-M-11 {

grid-column: span 11;

}

.grid-M-10 {

grid-column: span 10;

}

.grid-M-9 {

grid-column: span 9;

}

.grid-M-8 {

grid-column: span 8;

}

.grid-M-7 {

grid-column: span 7;

}

.grid-M-6 {

grid-column: span 6;

}

.grid-M-5 {

grid-column: span 5;

}

.grid-M-4 {

grid-column: span 4;

}

.grid-M-3 {

grid-column: span 3;

}

.grid-M-2 {

grid-column: span 2;

}

.grid-M-1 {

grid-column: span 1;

}

/* 横幅599px以下 */

@media (max-width: 599px) {

.grid-S-12 {

grid-column: span 12;

}

.grid-S-11 {

grid-column: span 11;

}

.grid-S-10 {

grid-column: span 10;

}

.grid-S-9 {

grid-column: span 9;

}

.grid-S-8 {

grid-column: span 8;

}

.grid-S-7 {

grid-column: span 7;

}

.grid-S-6 {

grid-column: span 6;

}

.grid-S-5 {

grid-column: span 5;

}

.grid-S-4 {

grid-column: span 4;

}

.grid-S-3 {

grid-column: span 3;

}

.grid-S-2 {

grid-column: span 2;

}

.grid-S-1 {

grid-column: span 1;

}

HTMLはこんな感じです。

<div class="grid-S-6 grid-M-3 grid-L-4">
grid-S-6 grid-M-3 grid-L-4
</div>

grid-S-6 grid-M-3 grid-L-4

</div>

L画面では・・・
M画面では・・・
S画面では・・・

次ページに骨組みサンプルを載せておきます、自分好みにカスタマイズしてください。