レスポンシブデザインの実装

<やりたいこと>

グリッドレイアウトをブレークポイントに併せて変更し、レスポンシブデザインを実装する
@media (min-width: 320px), @media (min-width: 480px), @media (min-width: 768px), @media (min-width: 992px), @media (min-width: 1100px)を用いて実装したい。

<用件>
xs: 480px未満 sm: 480px以上768px未満 md: 768px以上992px未満 lg: 992px以上1100px未満 xl: 1100px以上

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <title>Class 8 チャレンジ</title>
6    <!-- viewport -->
7    <meta name="viewport" content="width=device-width, initial-scale=1" />
8    <!-- css file -->
9    <link rel="stylesheet" href="styles.css" />
10    <!-- fonts -->
11    <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet">
12    <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded|Lora" rel="stylesheet">
13  </head>
14  <body>
15    <!-- top main start -->
16    <section class="top-main-wrapper">
17      <div class="top-main full-width-container">
18        <div class="row">
19          <div class="column-12">
20            <div class="top-main-content">
21              <h2>TOP MAIN</h2>
22              <h1>CodeGrit : GRID SAMPLE</h1>
23              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
24                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
25                consequat.</p>
26            </div>
27          </div>
28        </div>
29      </div>
30    </section>
31    <!-- top main end -->
32    <!-- middle section start -->
33    <section class="middle-section-wrapper">
34      <div class="full-width-container">
35        <div class="row middle-columns">
36          <div class="bg-shose column-4">
37          </div>
38          <div class="column-4">
39            <div class="middle-column-content">
40              <h3>MIDDLE COLUMUN</h3>
41              <h2>
42                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
43              </h2>
44              <p>
45                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
46                magna
47                aliqua.
48              </p>
49            </div>
50          </div>
51          <div class="bg-sunglasses column-4">
52          </div>
53        </div>
54      </div>
55      <div class="full-width-container">
56        <div class="row middle-columns">
57          <div class="column-4">
58            <div class="middle-column-content">
59              <h3>MIDDLE COLUMUN</h3>
60              <h2>
61                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
62              </h2>
63              <p>
64                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
65                magna
66                aliqua.
67              </p>
68            </div>
69          </div>
70          <div class="bg-guy-with-cap column-4">
71          </div>
72          <div class="column-4">
73            <div class="middle-column-content">
74              <h3>MIDDLE COLUMUN</h3>
75              <h2>
76                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
77              </h2>
78              <p>
79                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
80                magna
81                aliqua.
82              </p>
83            </div>
84          </div>
85        </div>
86      </div>
87    </section>
88    <!-- middle section end -->
89    <!-- middle label start -->
90    <section class="middle-label-wrapper">
91      <div class="full-width-container">
92        <div class="row">
93          <div class="column-12">
94            <div class="middle-label">
95              <h2>MIDDLE LABEL</h2>
96              <h3>
97                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
98              </h3>
99            </div>
100          </div>
101        </div>
102      </div>
103    </section>
104    <!-- middle label end -->
105    <!-- bottom section start -->
106    <section class="bottom-section-wrapper">
107      <div class="container">
108        <div class="row">
109          <div class="column-12">
110            <h2 class="bottom-section-title">BOTTOM SECTION</h2>
111          </div>
112        </div>
113        <div class="row">
114          <div class="column-6">
115            <img src="./images/nick-karvounis-261181.jpg" alt="bottom-section-img" />
116          </div>
117          <div class="column-6">
118            <div class="bottom-section-content-wrapper">
119              <h2>SECTION TITLE</h2>
120              <p>
121                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
122                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
123                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
124                occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
125              </p>
126            </div>
127          </div>
128        </div>
129        <div class="row">
130          <div class="column-6">
131            <div class="bottom-section-content-wrapper">
132              <h2>SECTION TITLE</h2>
133              <p>
134                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
135                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
136                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
137                occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
138              </p>
139            </div>
140          </div>
141          <div class="column-6">
142            <img src="./images/kristian-egelund-476932.jpg" alt="bottom-section-img" />
143          </div>
144        </div>
145      </div>
146    </section>
147    <!-- bottom section end -->
148    <!-- footer start -->
149    <footer class="footer">
150      <div class="full-width-container">
151        <div class="row">
152          <div class="column-12">
153            <h2>FOOTER</h2>
154            <h1>CodeGrit : GRID SAMPLE</h1>
155          </div>
156        </div>
157      </div>
158    </footer>
159    <!-- footer end -->
160  </body>
161</html>

column setting　のみ

css
1/*
2* column settings
3*/
4.full-width-container {
5  width: 100%;
6  margin: 0 auto;
7}
8
9.container {
10  width: 1100px;
11  margin: 0 auto;
12}
13
14.row {
15  display: flex;
16  flex-wrap: wrap;
17}
18
19.column-1 {
20  width: 8.333%;
21}
22
23.column-2 {
24  width: 16.667%; 
25}
26
27.column-3 {
28  width: 25%;
29}
30
31.column-4 {
32  width: 33.333%;
33}
34
35.column-5 {
36  width: 41.667%;
37}
38
39.column-6 {
40  width: 50%;
41}
42
43.column-7 {
44  width: 58.333%;
45}
46
47.column-8 {
48  width: 66.667%;
49}
50
51.column-9 {
52  width: 75%;
53}
54
55.column-10 {
56  width: 83.333%;
57}
58
59.column-11 {
60  width: 91.667%;
61}
62
63.column-12 {
64  width: 100%;
65}