ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

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

, , ,

※結論までワープする

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

gridデザインの例

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デザインと言えるのかは謎ですが、、、┐(‘~`;)┌

IEでもflexボックスでグリッドデザインを作る方法! #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #flex #grid #IE対策

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク