「Grid」を使用した聖杯レイアウトについてまとめました。
※使うメリットはdivタグの使用頻度が減り、コードが見やすい。
完成形
HTML
親子関係を作ること。
親のclassに「グリッドコンテナー」(grid-container)を指定し、レイアウト対象である「グリッドアイテム」を囲む。
<div class="grid-container">
<header>ヘッダー</header>
<nav>ジャンル</nav>
<main>メモ</main>
<aside>辞書</aside>
<footer>フッター</footer>
</div>
CSS
グリッドラインで分割をする。
親クラス
display: grid;を記述。
横を分割し、グリッドラインを作る。
grid-template-columns: 1fr 3fr 1fr;
縦を分割し、グリッドラインを作る。
grid-template-rows:1fr 6fr 1fr;
※今回はfr（比率）で区切る。px、%でもOK！
グリッドアイテム
区切ったグリッドラインの範囲を数値で指定する。
横は、grid-column: 始まりのライン / 終わりのライン;
縦は、grid-row: 始まりのライン / 終わりのライン;
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows:1fr 6fr 1fr;
height: 100vh;
}
header {
grid-column: 1 / 4;
grid-row: 1 / 2;
background-color: #E6FFE9;
}
article {
grid-column: 2 / 3;
grid-row: 2 / 3;
background-color: white;
}
nav {
grid-column: 1 / 2;
grid-row: 2 / 3;
background-color: #EEEEEE;
}
aside {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: whitesmoke;
}
footer {
grid-column: 1 / 4;
grid-row: 3 / 4;
background-color: #E6FFE9;
}
引用 https://goodsan.jp/wp/gridholy/
プログラミング初心者です。色々ご指摘頂けると幸いです。
↧