すべてのカテゴリ

auto-fit（auto-fill）とminmaxを使ってレイアウトすれば、簡単にレスポンシブなレイアウトに！今回もコピペで使えるコード付き！一緒にやって行きましょう🎵完成見本https://　tsuyu0102.github.io/css-sample/grid-auto-fit/index.html▼1500px幅▼768px幅▼320px幅▼ホバーはこのようにしてみましたhtml<section class="item-section">   <h2>NEW ITEMS</h2>   <div>    <a href="#"><img src="img/item01.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">¥6,500</span></a>    <a href="#"><img src="img/item02.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">¥6,500</span></a>    <a href="#"><img src="img/item03.jpg" alt="" />Letter graphic Mens T-shirt<span class="price">

CSS Gridは「なんとなく並べるためのもの」ではありません。レイアウトを“設計するためのツール”です。ここを間違えると、flexと大差ない使い方になり、保守性が一気に落ちます。逆に本質を押さえると、複雑なUIでもシンプルに書けるようになります。Gridの本質は「2次元レイアウト」flexboxは「1方向（横 or 縦）」の制御です。一方、Gridは「縦と横を同時に制御」します。ここを理解せずに使うと、ただの「便利な並び替えツール」で終わります。重要なのはこれです。横の並び（列）縦の並び（行）それぞれの交差でレイアウトを設計するつまり、最初に「配置」を設計してからコードを書くのが正しい順序です。まずやるべきは「線を引くこと」Gridを使うときにいきなりCSSを書くのは間違いです。先にやるべきは、レイアウトを分解することです。例えばこんな構成があったとします。ヘッダーサイドバーメインフッターこれをそのまま書くのではなく、こう考えます。横に何列あるか縦に何段あるか各要素はどこに配置されるかこの「設計」ができていないと、Gridは100%崩れます。基本構文はこれだけGridのコアはたったこれです。display: gridgrid-template-columnsgrid-template-rows例えば：.container {  display: grid;  grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;}この時点で、もうレイアウトは決まっています。左に200pxのサイドバー右に残りの