IEでもflexボックスでグリッドデザインを作る方法！

※結論までワープする

タイルのように同じ大きさのボックスを並べるデザイン。



CSSのdisplay:gridを使うと簡単に表示できます。



画面幅に合わせて表示するタイルの列が自動で変わる優れもの。
できたァと思ってInternet Explorer（以下、IE）で確認すると・・・


なにぃーっ！！
調べてみたらIEはGridデザインに対応してないではありませんか。
（※2018年9月時点）
ベンダープレフィックスなどいろいろ頑張ってみましたが、上手くいかず。
しょーがないからflexボックスで再現することにしました。
ただ、display:flexにするだけでは最終行が左端にきません。

画面幅に合わせて行数を調整し、justify-content: flex-start;にします。

結論

HTMLはこちら

<div class="grid">
	<p>日本</p>
	<p>パリ</p>
	<p>ローマ</p>
	<p>ナポリ</p>
	<p>ロンドン</p>
	<p>フランクフルト</p>
	<p>ベルン</p>
</div>

CSSはこちら

.grid{
	/*display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	grid-auto-rows: 1fr;
	grid-gap: 0.8em;*/

	display: flex;
    flex-wrap: wrap;
    justify-content: start;
    max-width: 1200px;
}.grid p{
	background: white;
	overflow: hidden;
	min-width: 0;
	padding: 1em;
	color: #008A6D !important;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	flex: 0 0 14.66667%;
	max-width: 14.66667%;
	margin: 1%;
}
@media screen and (max-width: 1100px){
	.grid p{
		flex: 0 0 18%;
		max-width: 18%;
	}
}
@media screen and (max-width: 900px){
	.grid p{
		flex: 0 0 23%;
		max-width: 23%;
	}
}
@media screen and (max-width: 768px){
	.grid p{
		flex: 0 0 29.333333%;
		max-width: 29.333333%;
		margin: 2%;
		height: 75px;
	}
}
@media screen and (max-width: 480px){
	.grid p{
		flex: 0 0 46%;
		max-width: 46%;
		margin:2%;
		height: 70px;
	}
}

1100px以上では6列。
900px以上では5列。
・・・と続いて、480px未満で2列になります。
なぜかIEではdisplay:flexのときbox-sizing:border-boxが効かないので、それも含めて計算しております。
これでgridデザインと言えるのかは謎ですが、、、┐(‘～`；)┌