Some Heading

---CSS---
dlタグ

images {
    display: grid;
    grid-template-columns: 400px 400px 
}

dtタグ /dt

ddタグ

  dt 1 {grid-row: 1; grid-column: 1;
          margin-bottom: 20px;}

  dd 1 {grid-row: 1; grid-column: 2;}

横並びのCSSコード /dd

dtタグ

ddタグ

 dt 2 { grid-row: 2;
     grid-column: 2; }

 dd 2 { grid-row: 2;
     grid-column: 1; }

下の横並びのCSSコード

---------HTML---------

     <div>
       <dl id="images">

       <dt id="dt1"><img src="img/japan3.jpg" alt="京都"></dt>
       <dd id="dd1"><pre>..........</pre></dd>

       <dt id="dt2"><img src="img/oiso.jpg" alt="大磯"></dt>
       <dd id="dd2"><pre>..........</pre></dd>

         </dl>
      </div>

---------CSS---------

#images {
    /*border:1px solid #999;*/ 
    display: grid;
    grid-template-columns: 400px 400px
   
}
#dt1 {
    
    grid-row: 1; grid-column: 1;
    margin-bottom: 20px;
    border:1px solid #999; 
}
#dd1 {
    grid-row: 1; grid-column: 2;
    margin-bottom: 20px;
    border:1px solid #999; 
}
#dt2 {
    grid-row: 2; grid-column: 2;
    margin-left: 40px;
    border:1px solid #999; 
}
#dd2 {
    grid-row: 2; grid-column: 1;
     margin-left: 0;
    border:1px solid #999; 
}

Some Heading

Some content and stuff

下記の例では、グリッドコンテナを縦方向に 3rem, 3rem、横方向に 4rem, 4rem, 4rem, 4rem の領域に分けています。grid-row: 1 / 2 は縦方向のグリッド線の 1番目から 2番目、 grid-column: 1 / 2 は、横方向のグリッド線の 1番目から 2番目の間の領域にグリッドアイテムを描画することを意味します。

---------HTML---------

＜div class="grid-container">
  ＜div class="itemA">A＜/div>
  ＜div class="itemB">B＜/div>
  ＜div class="itemC">C＜/div>
  ＜div class="itemD">D＜/div>
  ＜div class="itemE">E＜/div>
  ＜div class="itemF">F＜/div>
＜/div>

---------CSS---------

＜style>
.grid-container {
   margin: 10px;
  
  display: grid;
  grid: 3rem 3rem / 4rem 4rem 4rem 4rem;
}
.grid-container > * {

  border: 1px solid #ccc;
  text-align: center;
}
.itemA { grid-row: 1 / 2; grid-column: 1 / 2; }
.itemB { grid-row: 2 / 3; grid-column: 1 / 2; }
.itemC { grid-row: 1 / 3; grid-column: 2 / 3; }
.itemD { grid-row: 1 / 2; grid-column: 3 / 5; }
.itemE { grid-row: 2 / 3; grid-column: 3 / 4; }
.itemF { grid-row: 2 / 3; grid-column: 4 / 5;
＜/style>

CSS Grid Layout を極める！（基礎編）
Amazonキラー　ショッピファイとは