回答編集履歴

1

コード追記

2020/11/29 14:54

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -43,3 +43,71 @@
43
43
 
44
44
 
45
45
  Bootstrapだと凝ったレイアウトにしようとするとHTMLがどうしても複雑になりますね。
46
+
47
+
48
+
49
+ ---
50
+
51
+ 蛇足ですか、CSS Grid を使うとHTMLをシンプルにできて、CSSもシンプルな記述で同様の実装ができます。
52
+
53
+
54
+
55
+ ```html
56
+
57
+ <div class="container-grid">
58
+
59
+ <div class="box1">
60
+
61
+ box1
62
+
63
+ </div>
64
+
65
+ <div class="box2">
66
+
67
+ box2
68
+
69
+ </div>
70
+
71
+ <div class="box3">
72
+
73
+ box3
74
+
75
+ </div>
76
+
77
+ </div>
78
+
79
+ ```
80
+
81
+
82
+
83
+ ```css
84
+
85
+ .container-grid {
86
+
87
+ display: grid;
88
+
89
+ grid-template-columns: 1fr 3fr;
90
+
91
+ }
92
+
93
+ .box1 {
94
+
95
+ background-color: green
96
+
97
+ }
98
+
99
+ .box2 {
100
+
101
+ grid-row: span 2;
102
+
103
+ background-color: red;
104
+
105
+ }
106
+
107
+ .box3 {
108
+
109
+ background-color: blue;
110
+
111
+ }
112
+
113
+ ```