/* ========== CSSスタート  Grid 3       2020/12/2 更新   ==========   */
 
 body {
    width: 850px;
    display: grid;
    
    margin: 0px 10px 0 10px;
    min-height: 60vh;
    grid-template-rows: 70px 80px 1fr 80px;
    grid-template-columns: 80px 1fr 200px;
    grid-template-areas:
        "title  title  title "
        "nav    main   ad    "
        "nav    main   side  "
        "footer footer footer";
}
body > * {
    margin: 3px;
    padding: 10px;
}
h1 {
    grid-area: title;
    background: #faa;
    border-radius: 20px 20px 0 0;
}
main {
    grid-area: main;
    background: #FFFFCC;
}
nav {
    grid-area: nav;
    background: #aaf;
}
side {
    grid-area: side;
    background: #faf;
}
footer {
    grid-area: footer;
    background: #aaa;
    font-size: 1.5em;
    text-align: center;
    border-radius: 0 0 10px 10px;
}
ad {
    grid-area: ad;
    background: #888;
}
 

 

             /* ==========内部 CSSスタート  wrapper1==========   */
.wrapper1 {
  margin: 10px;
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}
 
               /*消す  .wrapper2 > * {
                   margin: 10px;
                   width:100%;
                   display: grid;
                    grid-column: 2;
                   }
                   .full-bleed {
                     margin: 10px;
                     width: 100%;
                     grid-column: 1 / 4;
                   }     */

                             /*   ========== CSS  parent ==========     */
.parent {
 margin: 10px;
  width: 845px;
  display: flex;
  flex-wrap: nowrap;
}
.wrapper {                   /*   ========== CSS  wrapper ==========    */
  margin: 2px;
  
  width: 845px;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);
  grid-gap: 0.5rem;
}
#a{background: #afa; height: 100px;}
#b{background: #aaf;}
#c{background: #faf;}
body{margin: 5px;
 width: 850px; }
 
 
 /*--grid-container--*/
.grid-container {                         /*   ========== CSS  grid-container ==========    */
   margin: 10px;
  
  display: grid;
  grid: 3rem 3rem / 4rem 4rem 4rem 4rem;
}
.grid-container > * {

  border: 1px solid red;
  text-align: center;
}
.itemA { grid-row: 1 / 2; grid-column: 1 / 2; }          /*   ========== CSS item A 〜 F ==========    */
.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; }  
#container {                                                /*  ====== CSS #container ====            */
    display: grid;            /* グリッドレイアウト */
    
    display: grid;
    grid-template-rows: 100px 50px;
    grid-template-columns: 150px 1fr;
}
#container {
    grid-template-areas:
        "areaA areaB"
        "areaA areaC";
}
                              /* アイテム */
#itemA {
    grid-row: 1 / 3;                                    /*  ====== CSS #itemA 〜 C  ====            */
    grid-column: 1 / 2;
    background: #f88;
}
#itemB {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background: #8f8;
}
#itemC {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    background: #88f;}
                        /* コンテナ */
#container1 {
    margin: 5px;                                      /*  ====== CSS #container１　 ====            */
    display: grid;
    grid-template-rows: 160px 80px;
    grid-template-columns: 230px 1fr;
    grid-template-areas:
        "areaA areaB"
        "areaA areaC";
}

                           /* アイテム */              /*  ====== CSS #itemA 〜 C  ====     ●       */
#itemA1 {
    
    grid-area: areaA;
    background: red;  /*#f88;*/
}
#itemB1 {
    grid-area: areaB;
    background: #8f8;
}
#itemC1 {
    grid-area: areaC;
    background: #88f;
}
.o-grid {           　　　/*====== CSS o-grid ==  https://coliss.com/articles/build-websites/operation/css/how-to-use-css-minmax.html */
  margin: 20px 0 0 0;
  width: 845px;
  display: grid;
  grid-template-columns: minmax(200px, 500px) 1fr 1fr;
  grid-gap: 0.3rem;
}
#a{background: #afa;}
#b{background: #aaf;}
#c{background: #faf;}

　　
#elementmmm{
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(200px, 50%, 845px);　　　　　　　　/*  clamp クランプ、締め具、締め付けるの意味　(最小幅,推奨幅, 最大幅)指定する　*/
  padding: 1.5rem 1rem;
  color: #fff;
  background: #468eef;
  border-radius: 5px;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.13);
  margin: 20px 5px;　　                        /*上下 ・ 左右*/
} 
code {                                     　
  display: inline-block;
  background-color: #bec2bf;
  font-family: "PT Mono";
  padding: 0px;
  margin: 20px 5px 20px 5px;
  border-radius: 20px;   /*ボックスの４つのコーナーの角丸をまとめて指定する際に使用します。*/
}
/*https://codepen.io/shadeed/pen/924419f15bfdcf0cd0103b0587524b0b?editors=1000  */