Zenn
👽

👾CSS グリッドレイアウト👾

2022/12/03に公開
CSS
HTML
初心者
プログラミング
tech

🌟CSS グリッドレイアウト

CSSグリッドレイアウトとは
格子状のマス目をベースとして、CSSでWebサイトのレイアウトを組む手法！
カード型レイアウト、タイル型レイアウトととも呼ばれている！
Flexboxでは実現できない複雑なレイアウトを効率よく作成できる🙆🏻‍♀️
φ(･･比較的新しい手法

🌱CSSグリッドレイアウトの基本的な書き方

〜gridコンテナーとgridアイテム〜

グリッドコンテナーを作成するには、要素に対してdisplay: gridかdisplay: inline-gridを指定する！
グリッドコンテナーを作成すると、直接の子要素がすべてグリッドアイテムへと変わる

例） containerクラスのdivを親要素として、その内部には 6個の子要素が含まれている

    <div class="container">
        <div class="item">item01</div>
        <div class="item">item02</div>
        <div class="item">item03</div>
        <div class="item">item04</div>
        <div class="item">item05</div>
        <div class="item">item06</div>
    </div>

.container をグリッドコンテナー化

.container {
            display: grid;
        }

🌱grid-template-columnsプロパティ

横並びについて指定

grid-template-columns プロパティを追加すると、列トラックのサイズが定義できる！

例）3 本の 200 ピクセル幅の列トラックを持つグリッドを作成

.container {
            display: grid;
            grid-template-columns: 200px 200px 200px; 
       }

💡単位　fr
fr＝fraction
日本語で言うと分数
gridレイアウトを使うにあたって誕生した新しいサイズの単位

新しい単位 fr は、グリッドコンテナー内の利用可能な空間の比を表す
次のグリッド定義は、利用可能なスペースに応じて伸縮する、幅が 3 等分されたトラックを作成

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

frは他の単位と組み合わせることも可能！🙆🏻‍♀️

.container {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

最初のトラックは 500px なので、この固定幅は利用可能な空間から除外される
残りの領域は 3つに分割され、比率に応じて2つの変動幅のトラックに割り当てられる!!

🌱grid-trmplate-rowsプロパティ

縦の並びを指定できる

.container {
            display: grid;
            grid-template-rows: 200px 200px 200px;
}

🌱余白の指定

Gapプロパティ

  • Gap:16px;
  • 横 column-gap:16px;
  • 縦 row-gap:30px;
  • 一括指定　gap:30px 16px;

🌱repeat関数で繰り返しの指定をする

repeat（繰り返す数　要素の幅）

grid-template-columns: 1fr 1fr 1fr;
↓
grid-template-columns: repeat(3,1fr);

🌱minmax関数で最小値、最大値を指定する

minmax(最小値,最大値)
↓
grid-template-columns:repeat(3,minmax(240px, 1fr));

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

🌱auto-fill/auto-fitで繰り返しの数値を指定

  • auto-fillプロパティ
    repeat(auto-fill, 値)

グリッドコンテナー（親要素）の大きさに合わせて繰り返す
グリッドコンテナー（親要素）にスペースが余る場合、空のグリッドが作られる

.fill{
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

        }
  • auto-fitプロパティ
    repeat(auto-fit, 値)

グリッドコンテナー（親要素）の大きさに合わせて繰り返す
グリッドコンテナー（親要素）にスペースが余る場合、余白として扱われる

.fit{
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            margin-top: 50px;
        }

🌟ポートフォリオ

作品紹介サイトの制作

簡単なサイトを真似しながら作ってみた👏🏻
すぐに反映されるマークアップはやっぱり楽しい！
実際に使うことでより理解が深まった😌
今日は長時間やって目がめちゃくちゃ疲れた👽
勉強してると時間経つのあっという間！
明日も頑張ろう💪🏻パワー

Discussion