各部品のデフォルト動きの個人的メモ Box- divタグ相当 Container- 水平方向の中央揃えされたdivタグ相当 - maxWidthで横幅指定(falseで指定なし) Grid- 12列のグリッドレイアウト - containerとitemの2種類 - itemの幅はパーセンテージで変動 - spacingで余白を指定(1で8px) - direction、justify、alignItemsで方向、横の並び、縦の並びを指定 - containerはネストできる ブレークポイント- xs 0px - sm 600px - md 960px - lg 1280px - xl 1920px
![Material-UI レイアウト部品整理|wtnb_dev](https://cdn-ak-scissors.b.st-hatena.com/image/square/76018c1eefebd20a5d9cdcc015d7ebb4f7ff8046/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F22143250%2Fprofile_913a3a5ae1272df99a573ea195161f4b.jpg%3Ffit%3Dbounds%26format%3Djpeg%26quality%3D85%26width%3D330)