回答編集履歴
1
訂正
answer
CHANGED
|
@@ -3,21 +3,31 @@
|
|
|
3
3
|
上3段下4段であれば、このようにするとどうでしょうか。
|
|
4
4
|
|
|
5
5
|
```css
|
|
6
|
+
.grid-container {
|
|
7
|
+
display: grid;
|
|
8
|
+
grid-template-columns: repeat(8, 1fr);
|
|
9
|
+
gap: 20px;
|
|
10
|
+
}
|
|
6
11
|
.card{
|
|
7
|
-
grid-column: span
|
|
12
|
+
grid-column: span 2;
|
|
8
13
|
}
|
|
9
14
|
.card:nth-child(1) {
|
|
10
|
-
grid-column: 2 / span
|
|
15
|
+
grid-column: 2 / span 2;
|
|
11
16
|
}
|
|
12
17
|
```
|
|
13
18
|
|
|
14
19
|
上4段下3段であれば、このようにするとどうでしょうか。
|
|
15
20
|
|
|
16
21
|
```css
|
|
22
|
+
.grid-container {
|
|
23
|
+
display: grid;
|
|
24
|
+
grid-template-columns: repeat(8, 1fr);
|
|
25
|
+
gap: 20px;
|
|
26
|
+
}
|
|
17
27
|
.card{
|
|
18
|
-
grid-column: span
|
|
28
|
+
grid-column: span 2;
|
|
19
29
|
}
|
|
20
30
|
.card:nth-child(5) {
|
|
21
|
-
grid-column: 2 / span
|
|
31
|
+
grid-column: 2 / span 2;
|
|
22
32
|
}
|
|
23
33
|
```
|