要素をまとめたい（header、flex、grid）

headerリストのaとg、bとhという様にまとめて一つに要素にしたいのですが、どのようなコードを書いたら良いのか見当がつきません。
どなたかお教え頂けませんでしょうか。

html
1   <header>
2     <div class="wrap">
3     <div class="container-lg d-flex">
4       <div class="header-logo">
5         <img src="..." alt="ロゴ" />
6       </div>
7       <div class="header-block">
8         <div class="header-list listA">aaa</div>
9         <div class="header-list listB">bbb</div>
10         <div class="header-list listC">ccc</div>
11         <div class="header-list listD">ddd</div>
12         <div class="header-list listE">eee</div>
13         <div class="header-list listF">fff</div>
14         <div class="header-item listG">ggg</div>
15         <div class="header-item listH">hhh</div>
16         <div class="header-item listI">iii</div>
17         <div class="header-item listJ">jjj</div>
18         <div class="header-item listK">kkk</div>
19         <div class="header-item listL">lll</div>
20       </div>
21       <div class="header-icon">
22         <ul>
23           <li>
24             <a class="navbar-brand" href="..."> <img src="" alt="" width="29" height="29"></a>
25           </li>
26           <li>
27             <a class="navbar-brand" href="..."> <img src="" alt="" width="29" height="29"></a>
28           </li>
29           <li class="lang">ZZZ</li>
30         </ul>
31        </div>
32      </div>
33    </div>
34    </header>

css
1.wrap{
2  max-width: 1146px;
3  margin: auto;
4}
5.container-jg {
6  width: 100%;
7  margin: 0 auto;
8}
9header {
10  width: 100%;
11  background-color: #000000;
12  height: 80px;
13}
14.d-flex {
15  display: flex;
16  flex-wrap: wrap;
17  justify-content: center;
18  align-items: center;
19}
20
21.header-logo img {
22  padding-top: 27.3px;
23  padding-bottom: 27.3px;
24  padding-right: 100px;
25}
26.header-block {
27  display: grid;
28  grid-template-rows: 18px 11px;
29  grid-template-columns: 97px 122px 90px 116px 78px 118px;
30}
31.listA{
32  grid-row: 1/2;
33  grid-column: 1/2;
34}
35.listB{
36  grid-row: 1/2;
37  grid-column: 2/3;
38}
39.listC{
40  grid-row: 1/2;
41  grid-column: 3/4;
42}
43.listD{
44  grid-row: 1/2;
45  grid-column: 4/5;
46}
47.listE{
48  grid-row: 1/2;
49  grid-column: 5/6;
50}
51.listF{
52  grid-row: 1/2;
53  grid-column: 6/7;
54}
55.listG{
56  grid-row: 2/3;
57  grid-column:1/2;
58}
59.listH{
60  grid-row: 2/3;
61  grid-column: 2/3;
62}
63.listI{
64  grid-row: 2/3;
65  grid-column: 3/4;
66}
67.listJ{
68  grid-row: 2/3;
69  grid-column: 4/5;
70}
71.listK{
72  grid-row: 2/3;
73  grid-column: 5/6;
74}
75.listL{
76  grid-row: 2/3;
77  grid-column: 6/7;
78}
79.header-list {
80  font-family: "Adobe Garamond Pro";
81  font-weight: normal;
82  font-size: 18px;
83  letter-spacing: 0.05em;
84  line-height: 25px;
85  text-align: left;
86  color: #fff;
87  list-style: none;
88}
89
90.header-item{
91  font-family: YuMincho;
92  font-weight: 500;
93  font-size: 11px;
94  letter-spacing: 0.05em;
95  line-height: 14px;
96  text-align: left;
97  color: #fff;
98}
99
100.header-icon{
101  padding-left: 80px;
102  padding-top: 25px;
103}
104.header-icon ul {
105  display: flex;
106}
107ul {
108  /*ulの余白を消す*/
109  margin: 0;
110  padding: 0;
111}
112.lang {
113  font-family: "Adobe Garamond Pro";
114  font-weight: normal;
115  font-size: 18px;
116  line-height: 34px;
117  text-align: left;
118  color: #fff;
119  list-style: none;
120}

行動規範の内容に同意します

回答1件

＞ まとめて一つに要素にしたい

html
1<div class="header-block">
2  <div class="wrapper">
3    <div class="header-list listA">aaa</div>
4    <div class="header-item listG">ggg</div>
5  </div>
6...