決められた位置に格子状でUIを配置していく技術をグリッドといいます。
cssでは「display: grid」と「grid-template-columns」と「grid-auto-rows」をうまく
使い分けることでグリッドUIを造れるようになります。
各プロパティの意味はこちら↓
display:grid・このプロパティで囲んだUIをグリッド状に並べることが出来る。
grid-template-columns・グリッド同士の横の間隔を調整します。
例えば二つの四角をグリッドに紐付けてプロパティをgrid-template-columns: 190px
のみとすると、一つめの四角は横の間隔を調整されて表示されますが、二つ目のグリッドは
その四角の一段下に表示されます。これは、画面に出したい列の幅を一つしか設定していないためです。
grid-template-columns: 190px 165pxと2列目までのプロパティを設定すると横に表示されます。
グリッドを横に三列展開したい場合は 190px 165px 120px;とプロパティを追加
していくことで展開できます。
grid-auto-rows・グリッド同士の縦の間隔を調整します。
こちらはプロパティで一つ設定するだけで高さを変えられます。
見出し+説明っぽいグリッドレイアウトを作った場合こんな感じに仕上がります。
<div id="order-page">
<div className="seed-wrapper">
<div className="seed-box" onClick={() => cosole.log("aaa")}>
<div className="card-box">
<p>国産豚バラ200g</p>
</div>
</div>
<div className="seed-box" onClick={() => cosole.log("aaa")}>
<div className="card-box">
<p>お徳用鰹節200g</p>
</div>
</div>
</div>
</div>
#order-page .seed-wrapper{
display: grid;
grid-template-columns: 190px 165px;
grid-auto-rows: 210px;
justify-content: center;
}
#order-page .seed-box{
width: 165px;
height: 190px;
background-color: #008800;
}
#order-page .seed-box .card-box{
width: 161px;
height: 65px;
padding: 2px;
font-size: 11px;
background-color: #bbb;
position: relative;
top: 122px;
left: 0px;
}
