CSS GIRD3

Some Heading

Some content and stuff

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

2b-minmax(auto, 70ch)-

3c-minmax(1rem, 1fr);-

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

5b-

6c-

7a-

8b-

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

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

3c---

4a---

5b---

6c---

7a---

8b---

a-wrapper 1 -

b--

c--

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

A-
container

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

　要　素　

　　　　　　　　　↓　　↓　　↓


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;                               /*上下０は不要？　左右自動 */
}

＜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円

タイトル

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