CSS GIRD3

Some Heading（見出し）

Some content and stuff

1a-
wrapper
minmax
(1rem,1fr)

2b-
minmax
(auto,70ch)

3c-
minmax
(1rem,1fr)

4a-
grid-gap: 0.5rem;
この間隔

5b-

6c-

7a-

8b-

1a-parentに｛ display: flex; と flex-wrap: nowrap; }
プロパティはフレックスコンテナ内のアイテムの折り返し方法を指定する際に使用します。

2b-nowrap は折り返しなし（初期値）flex-wrapは折り返す

3c-

4a-

5b-

6c-

7a-

8b-

a-wrapper 1

b-２３４５６７８９０１２３４５６７８９０

Some Heading

Some content and stuff

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

grid-containerのCODE

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で書く

  .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; }        
   .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; }

A-
container

containerのCODE

Htmlで書く

           ＜div id="container">                     
            ＜div id="itemA">A＜/div> 
            ＜div id="itemB">B＜/div> 
            ＜div id="itemC">C＜/div>
           ＜/div>

CSSで書く

#itemA {
    grid-row: 1 / 3;                                    
    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;
}
                        
#container {                  
    display: grid;
    grid-template-rows: 100px 50px;
    grid-template-columns: 150px 1fr;
}
#container {
    grid-template-areas:
        "areaA areaB"
        "areaA areaC";
}

A-container 1

-CSS-
#container1 {
 margin: 5px;                                      
 display: grid;
 grid-template-rows:146px 73px;
 grid-template-columns:230px1fr;
 grid-template-areas:
      "areaA areaB"
      "areaA areaC";}

-CSS-
#itemB1 {
    grid-area: areaB;
    background: #8f8;}

-HTML-
＜div id="itemC1"＞
＜div＞

grid-template-columns: minmax(200px, 500px) 1fr 1fr; と
grid-gap: 0.3rem;　のCSS

a- o-grid にminmax()をつかう！
1列目の幅はminmax(200px, 500px)で、これは最小値に200px、
最大値に500pxを定義しています。

b--Josh W Comeau

c--2列目と3列目の1frは、利用可能な残りのスペースを分配します。

classグループ wrapper・parent・wrapper1 ・ grid-container ・ o-grid ・ idグループ container ・ container1

　要　素　

　　↓ -CODE-


HTML
＜div class = "element">要素＜/div>
CSS
.element{
  display: flex;                             　/*表示：フレクッス;*/
  justify-content: center;                 /* コンテナ内全体の主軸方向（初期値では横方向）の揃え位置*/
  align-items: center;                    /* コンテナ内全体の交差軸方向（初期値では縦方向）の揃え位置*/
  width: clamp(200px, 50%, 1000px);    /*幅：クランプ（最小幅, 推奨幅, 最大幅）; */
  padding: 1.5rem 1rem;                /* */
  color: #fff;                         /*色 */
  background: #468eef;                 /*背景 */
  border-radius: 5px;                           /* */
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.13);  /* rgba( 赤, 緑, 青, 透明度 )*/
  margin: 0 auto;                               /*上下０は不要？　左右自動 */
}

タイトル

記事1

記事2

記事3

記事4

ナビ

フッター
-CODE-

＜html  body>
＜h2>タイトル＜/h2>

＜article>記事1＜/article>
＜article>記事2＜/article>
＜article>記事3＜/article>
＜article>記事4＜/article>
＜nav>ナビ＜/nav1>
＜footer>フッター＜/footer1>＜/body＞

-------------- --------------
tableが簡単かも

果物の値段
店名	りんご	もも
A店	100円	300円
B店	110円	280円

Layout Using CSS Grid

Some Heading（見出し）

Some Heading

grid-template-columns: minmax(200px, 500px) 1fr 1fr; とgrid-gap: 0.3rem; のCSS

タイトル

grid-template-columns: minmax(200px, 500px) 1fr 1fr; と
grid-gap: 0.3rem;　のCSS