[CSS]グリッドレイアウトでブログ的なレイアウトを実装する

グリッドレイアウトを使って一般的なブログやメディアのレイアウトを実装するためのメモ。

ヘッダーとフッターがトップとボトムに横幅いっぱい広がっていて、間には左側にコンテンツ、右側にサイドバーというレイアウト 。

body {
display: grid;
grid-template-columns: repeat(4, 1fr);

}

header,footer {
grid-column: 1 / span 5
}

main {

grid-column: 1 / span 3;

}

aside {
grid-column: span 2;
}

body部分で最初は横4列に配置しているが、各タグで調整。

headerとfooter部分は横幅いっぱいになるので、1~5まで配置。

main部分とaside部分は1~3まではmainが占め、残り2の部分はサイドバー といった感じで配置。