【個数が変わっても崩れない】3列ボーダーありのアイテムリスト

静的なページであれば要素が追加されたり削除することをあまり考えなくてもコーディングできるとお思います。

ですが動的なページだったり要素が削除されたり追加したり頻繁に修正するページである場合はいろいろなパターンを考えながらコーディングしていく必要があります。

要素を削除したり追加すると崩れてしまうということもあると思います。

事前にいろいろなパターンを想定しておくことで汎用的なコーディングができると思います。

よく使うものであればテンプレート化しておくことで作業の効率化にもつながります。

コーディング前に考えておくこと

• テキストが長くなって改行されても崩れない
• 要素が減ったり追加しても崩れない
• 大きい画像やアイコンが入っても収まるようにする

上記のようなことを考えてコーディングすることでどんな場面でも使えるものができると思います。

3列のアイテムリストを作る

html

<div class="list">
	<ul>
		<li>
			<figure><img src="img.jpg" alt="画像"></figure>
			<p>テキスト</p>
		</li>
		～省略～
	</ul>
</div>

css

.list ul{
        display: flex;
        flex-wrap: wrap;
        padding: 10px 6px 10px 10px;
}
.list ul li{
        padding: 16px 8px;
        width: calc(100% / 3);
        text-align: center;
        box-sizing: border-box;
        border: solid 1px #eee;
        margin-top: -1px;
        margin-left: -1px;
}       
.list ul li figure{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        margin: 0 auto 8px auto;
}
        
.list ul li figure img{
        max-width: 80px;
        max-height: 80px;
}
.list ul li p{font-size: 14px;}

今回はレスポンシブで3列のリストを作りました。

もし2列にしたい場合は下記を修正するだけで対応できます。

.list ul li{
        padding: 16px 8px;
        width: calc(100% / 3);　//ここを修正する
        text-align: center;
        box-sizing: border-box;
        border: solid 1px #eee;
        margin-top: -1px;
        margin-left: -1px;
}  

上記のwidthにcalc指定をしていますが3の部分を2にすれば2列になります。

サンプル