CSS GridでMediumみたいなブログを作る

はじめまして、咲といいます。
もうちょっとでクリスマスですね。

私は、フロントエンドエンジニアとして約半年ほど働いています。
ソースを探すことに四苦八苦したので、メモとして役に立ちそうな情報を書いていきたいと思います。

さて、クライアント様からのご依頼は、
__Mediumっぽいレイアウト＆スタイル__ということでした。

• PCからだと3カラム、記事の左右に余白
• 左カラムに動くサイドバーとSNSシェアボタン

ソースコードを読んだりして地道に作りました。
こちらのサイトはお洒落ですね〜なんともわかりやすい。
ただ、課金制になってから(?)なのか何件か読むとログインしなきゃのでほとんど使っていませんが... :P

####1. まずはグリッドレイアウトで、ページの枠組みを作ります。
このページを使うと簡単に作ってくれます。
CSS Grid Generator

.grid {
    display: grid;
    grid-template-columns: 18% 1fr 18%;
    grid-template-rows: 70px 1fr auto;
}

1frは、指定したコンテントの幅や高さに合わせてくれます。
そこで、ブログ記事など大きさを固定できない場合に便利です。
以下、引用

####2. サイドバーのスタイル

.article_body {
    height: 100%;
    grid-area: 2/2/3/3;
}

.article_sidebar-container {
    grid-area: 2/1/4/2;
    //この辺の高さの設定が大事
    overflow: hidden;
    position: sticky;
    position: -webkit-sticky;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.article_sidebar {
    //こっちも高さをfit-contentに
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    text-align: center;
}

.article_footer {
    grid-area: 3/2/4/3;
}

左のサイドバーのスタイル設定は、すこし違うとスクロールしてついてくる高さが変わったりします。そこで結構てこずりました。

See the Pen Grid Css blog layout by Saki Adachi (@sakiadachi88) on CodePen.

ありがとうございました！