cssコード１行でよくあるレイアウトを実現

前置き

最近、Youtubeで10 modern layouts in 1 line of CSSという動画を見ました。
すべてのデモコードはweb.devに載っています。
とっても勉強になったから、
少しだけ翻訳した内容をここで簡単に紹介したいと思います。

IE以外の重要なブラウザがすべて対応されています。

上下中央揃え

girdとplace-itemsで一発で上下中央を実現できます。
place-itemsは、align-itemsとjustify-itemsを統合できる簡略した書き方です。
以下のように、place-items: center;に設定するだけ、どんなサイズでも、親要素が簡単に
中央に配置できます。

html

<div class="parent blue" >
  <div class="box coral" contenteditable>
    :)
  </div>
</div>

css

 .parent {
    display: grid;
    place-items: center;
  }

image

place-itemsの属性について、MDNの記事に確認してくさい。

---

サイドバー

グリッドレイアウトのminmax機能を利用すれば、ブラウザの横幅に応じて、最適なサイドバーが一発変更できます。
minmax(150px, 25%)とは最小サイズを150pxに設定し、大きな画面では全体の25%まで伸ばすという書き方です。
grid-template-columns: minmax(150px, 25%) 1fr;を指定すると、左側のサイドバーは、25%で150pxのminmaxを取得し、右側のメインセクションは1frとして残りのスペースを占有します。
[frの説明について、こちらの記事に参考してくだい。]
(https://kumonosublog.com/coding/css/grid_layout_fr_auto/)

html

  <div class="parent">
    <div class="section yellow" contenteditable>
    Min: 150px / Max: 25%
    </div>
    <div class="section purple" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

css

  .parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
  }

image

grid-template-columnsの属性について、MDNの記事に確認してくさい。

---

最後に

まだ知らないcss、使用されていないcssがたくさんあります。
仕事で使用できるコードが限られているかもしれませんが、

自分の知識に制限をかけないよう、
世の中で流行っている、これから流行っているコード、
ぜひチェックしてみてください。