はじめに

今回は授業で習った時に結局どう使い分けたらいいんだ？と思っていたflexとgridについて、ブログの制作から学んだことを紹介します。

記事内では、このhtmlで作成していきます。

<div class="contents">
    <article class="itemA">
        <!-- 内容 -->
    </article>

    <article class="itemB">
        <!-- 内容 -->
    </article>

    <article class="itemC">
        <!-- 内容 -->
    </article>

    <article class="itemD">
        <!-- 内容 -->
    </article>
</div>

デザインは授業で使ったものを使っていきたいと思います。比較するため、flexとgridを共通のデザインで試していきたいと思います。

flexの特徴

flexは、ある要件に定義することでその直下の要素が並列になるスタイルです。

特徴としては、要素の並べ替えができることだと思います。flex-directionプロパティを使うと、HTMLはそのままで、要素の順番逆転が可能です。更にrow/columnを指定して縦列でも利用が可能です。
また、orderプロパティで順番を明示できます。

.contents{
    display: flex;
    flex-wrap: wrap; /*折り返したい場合、幅を決めたい場合*/
    flex-direction: row;
    justify-content: space-between;
}

.news article{
    width: 380px;
}

gridの特徴

gridは、次元レイアウト を、HTML/CSS を使って簡単・自由に操作できるスタイルです。

格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。要素の順番やフローは無関係に、要素の配置される位置を指定できることが特徴的です。

/* 親 */
.contents {
    display: grid;
    grid-template-columns: 380px 380px 380px 380px;
    grid-template-rows: 237px 237px;
    gap: 40px;
}

/* 子 */
.itemA {
    grid-row: 1/2;
    grid-column: 1/2;
}

.itemB {
    grid-row: 1;
    grid-column: 2;
}

.itemC {
    grid-row: 2;
    grid-column: 1/2;
}

.itemD {
    grid-row: 2;
    grid-column: 2/4;
}

2つの違い

flexとgridには明確な違いがあります。

flex → とりあえず横並びにしてから子要素の幅や配置を決めていく
grid → 先にどのように配置するか線を設定して、区切られた領域に子要素を当てはめる という点です。

また実装方法も少し異なり、flexが子要素に高さや横幅を設定するのに対し、gridは親要素に横幅や高さを設定します。なので子要素が増えるとgridでは区切る列の追加、アイテムの配置場所をそれぞれ設定する手間がかかってしまいます。

どう使い分けるか

以上のことからこのブログの実装では以下のようにflexとgridを使い分けました。

ブログ内では基本的にはflex（特に要素が増えるカテゴリーやアーカイブ）、１ページ内に表示する個数が決まっている記事一覧をgridで組みました。

終わりに

今回はブログ制作を通して、flexやgridを学ぶことができたので良かったです。

並列レイアウトは調べてみるとflexの他にもfloat:leftやinline-block、tableなどいろいろあるので奥が深いなと思いました。

使いこなせるように頑張りたいです。