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

簡易12分割サンプルソース　CSS

/* グリッド全体の設定 */
.grid-Wrapper { 
display: grid; 
grid-template-columns: repeat(12, 1fr); 
grid-gap: 2em; 
grid-row-gap: 2em;
}
/* 各グリッドの設定 */
.grid-Wrapper > div { 
background-color: #EDEDED;
padding: 2em;
text-align: center;
}
/* 横幅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

118

119

120

121

122

123

124

125

126

127

128

129

130

/* グリッド全体の設定 */

.grid-Wrapper {

display: grid;

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

grid-gap: 2em;

grid-row-gap: 2em;

}

/* 各グリッドの設定 */

.grid-Wrapper > div {

background-color: #EDEDED;

padding: 2em;

text-align: center;

}

/* 横幅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;

}

簡易12分割サンプルソース　HTML

<div class="grid-Wrapper">

<div class="grid-S-12 grid-M-4 grid-L-8">
grid-S-12 grid-M-4 grid-L-8
</div>

<div class="grid-S-12 grid-M-8 grid-L-4">
grid-S-12 grid-M-8 grid-L-4
</div>


<div class="grid-S-12 grid-M-12 grid-L-12">
grid-S-12 grid-M-12 grid-L-12
</div>


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

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

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

</div>

grid-S-12 grid-M-4 grid-L-8

</div>

grid-S-12 grid-M-8 grid-L-4

</div>

grid-S-12 grid-M-12 grid-L-12

</div>

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

</div>

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

</div>

grid-S-12 grid-M-6 grid-L-4

</div>

サンプルページ

簡易12分割サンプルソース CSS

簡易12分割サンプルソース HTML

コメント

簡易12分割サンプルソース　CSS

簡易12分割サンプルソース　HTML