Grid スタイルの基本

この記事を読むことでわかること

• CSS Gridの基本的な概念と使い方
• grid-template-columns プロパティの基本的な設定方法
  • 1fr を使用した均等な列の作成方法
  • auto と 1fr を組み合わせた自動幅と柔軟幅の設定方法
• repeat 関数を使った繰り返しのグリッドレイアウトの作成方法
  • repeat(3, 1fr) を使った3列の均等なグリッドの作成方法
  • repeat(auto-fit, minmax(200px, 1fr)) を使った自動調整のグリッドレイアウトの作成方法
  • repeat(auto-fill, minmax(200px, 1fr)) を使った自動調整のグリッドレイアウトの作成方法
• minmax 関数を使って、列の最小幅と最大幅を設定する方法
• 具体的なHTMLとCSSのコード例を通して、実際のブラウザ表示を確認する手順

この記事を通じて、CSS Gridの基礎知識を習得し、実際のウェブサイトで応用できるスキルが身につきます。

Gridの基礎

CSS Gridは、ウェブデザインにおいて非常に強力かつ柔軟なレイアウトシステムです。ここでは、CSS Gridの基本的なプロパティであるgrid-template-columnsについて詳しく説明します。

grid-template-columns: 1fr 1fr 1fr

最も基本的な例として、3つの列を均等に分割する設定を見てみましょう。

html

 <div class="grid-container">
     <div class="grid-item">1</div>
     <div class="grid-item">2</div>
     <div class="grid-item">3</div>
 </div>

css

        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 3つの均等な列を定義 */
            gap: 10px;
            background-color: #fff;
            color: #444;
        }
        .grid-item {
            background-color: #8ca0ff;
            border: 1px solid #ccc;
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }

cssの蛍光ペンで引いてある部分がグリッドに関するプロパティです。gapについては後ほど詳しく紹介しますのでここでは気にしないでくださいね。

これをブラウザで確認すると下のようになります。

このコードでは、3つの列が均等に分割され、各グリッドアイテムが1つの列に配置されます。

応用設定

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

先ほどはブロックが3つだったのでよかったのですが、もしブロックが10個なら、100個ならどうしますか？
grid-template-columns: 1fr 1fr 1fr 1fr…1fr（100個目）;
超めんどくさいですよね。

そこで、便利なのが repeat(○, 1fr)です。

grid-template-columns: repeat(3, 1fr)のように書くことでgrid-template-columns: 1fr, 1fr, 1fr)と同じ結果になります。

grid-template-columns: auto 1fr

次に、列の幅を異なる設定にする例を見てみましょう。autoは内容に基づいて幅を決定し、1frは残りのスペースを占めます。

html

    <div class="grid-container">
        <div class="grid-item">Auto Width</div>
        <div class="grid-item">Flexible Width</div>
    </div>

css

.grid-container {
            display: grid;
            grid-template-columns: auto 1fr; /* 1つ目の列は自動幅、2つ目の列は残りのスペースを占有 */
            gap: 10px;
            background-color: #fff;
            color: #444;
        }
        .grid-item {
            background-color: #8ca0ff;
            border: 1px solid #ccc;
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }