カラムを形成する3つの手段

例えば3カラムを作るのにtable以外のcssを使いたい場合。

ほぼ一般化しているのがfloat、最近勢力を伸ばしてきたflexにgrid、他にも手があるはずです、私が知らないだけで。
しかしこの3つの方法、一長一短なんですよね。
という訳で、私の覚書ではありますが。

例えばこのようなhtmlの場合

<div class="parent">
    <div class="one">左端のカラム</div>
    <div class="two">真ん中のカラム</div>
    <div class="three">右端のカラム</div>
</div>

jimdoの独自レイアウトでお馴染みのfloatは、最も知られています。
ソースコードがごちゃごちゃしがちなテーブルレイアウトの代替え案として長らく使われてきたベテランです。
ブラウザにも依存しませんし、最も確実な方法でもあります。

div.parent { overflow: hidden; width: 800px; }
div.parent div.one { float: left; width: 150px; }
div.parent div.two { float: left; width: 500px; }
div.parent div.three { float: left; width: 150px; }

しかし難点は、widthの指定が必須であるのと、floatの性格上親要素の高さがなくなること。
下の要素に clear: both を設定しないと、下の画像のようになります。

だったらここはflexを！と設定してみます。

div.parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
div.parent div { width: 30%; }

justify-content: space-between で要素も等間隔に離れますし、綺麗に並びます。
ブラウザも……IE10以下という骨董品をお使いでない限り、正しく表示されると思います。
しかしカラムレイアウトではなく表を作りたい時にこの設定だと、下の画像のようになります。

気にしなければ良いのかもしれませんが。

ちなみにgridは

div.parent {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
grid-template-columns: repeat(3,1fr);
-ms-grid-rows: 1fr 20px 1fr;
grid-template-rows: 1fr;
grid-gap: 20px 20px;
-moz-columns: auto 3;
-moz-column-gap: 20px;
}
div.parent div:nth-child(3n+1) { -ms-grid-column: 1; }
div.parent div:nth-child(3n+2) { -ms-grid-column: 3; }
div.parent div:nth-child(3n+0) { -ms-grid-column: 5; }
div.parent div:nth-child(-n+3) { -ms-grid-row: 1; }
div.parent div:nth-child(n+4):nth-child(-n+6) { -ms-grid-row: 3; }

2行3列の場合のcssです。

この場合もネックはIEになります。
何せこのcssだと、後日3行以上に増えた時には書き直しです。
いっそIEは無視で！と思っても、-ms-grid は、IE11も含むのですよ。
そう、未だにchromeに次ぐシェア率2位の座を譲らない、IE11です。
Edge弱すぎる……。

なので、絶対に行が増えないカラムレイアウトではgridを、可変の場合はflexを、どうしてもgridを使いたければIEだけはcssでflexを読み込むように、@supports not (display: grid) を使うようにしています。

ちなみに美しさや正しさは一切追求していません。
それ違うし！という方がおられましたら、RTで晒す前に、無知な私にこっそり教えていただけると幸いです。

【ハートブレーン】https://heartbrain.net