今日習った内容
📍 レイアウトプロパティgridについて理解しました(float、flexのみを使用するのは疎いです)
📍 体験反応式Web(メディア検索利用)
📍 箱の型番、余白、中央揃えなど->個人的にはレイアウトに次ぐ問題

1▼▼BOXタイプ(+中央揃え)

margin > border > padding > contents

displayは、異なる領域を使用します.

inline:コンテンツサイズ(小)で使用

block:画面全体(詳細は水平軸、垂直軸はcontentsサイズ)

を使用

margin、text-alignを使用してブロック要素を中央揃えできます

/* 요소가 inline (혹은 inline-block) 일때*/
.inline {
	text-align : center;
}

/* 요소가 block 태그일때 */
/* 방법1. margin 을 활용한다. */
.block {
	margin:auto;
}
/* 방법2. display로 inline으로 변경 후 정렬한다. */
.block {
	display: inline;
    text-align: center;
}

2▼Grid属性

cssレイアウトプロパティの1つ(display:float,flex...)

display:float属性に対する位置決め <= 📚 前日の記録を復習するTIL!

display: grid

grid-template-colums : 1rf 1rf 1rf>水平揃え

1:1:1:1の割合横並び(よろしければ1:2:1などを選択してもよいし、100 pxと表記してもよい)

 .container {
      display: grid;
      grid-template-columns: 1fr 200px 1fr;
 }

pxは固定値ですので、要素のボックスモデル(ボリューム)を考慮してください!