Flexboxレイアウトで、３カラムデザインなのだけど、タイル状配置を利用したレイアウトを考えてみた。 （こういうタイル状レイアウトを「グリッドレイアウト」っていうらしい）
TITLE
TEST1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
TEST2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
TEST3
二度もこの丁に一つをむやみに面白い差を信じて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうしたのです。その常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。
TEST4
二度もこの丁に一つをむやみに面白い差を信じて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうしたのです。その常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたく。
TEST5
TEST6
TEST7
TEST8
※border入れると幅の設定がややこしくなるのでなしで
HTML/CSS
<div class="container_all">
<div class="header">TITLE</div>
<div class="container_main">
<a href="">
<div class="art art1">
<h5>TEST1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</a>
<a href="">
<div class="art art2">
<h5>TEST2</h5>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</a>
<a href="">
<div class="art art3">
<h5>TEST3</h5>
<p>二度もこの丁に一つをむやみに面白い差を信じて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうしたのです。その常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたくっ。</p>
</div>
</a>
<a href="">
<div class="art art4">
<h5>TEST4</h5>
<p>二度もこの丁に一つをむやみに面白い差を信じて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうしたのです。その常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたく。</p>
</div>
</a>
<a href="">
<div class="art art5">
<h5>TEST5</h5>
<p></p>
</div>
</a>
<a href="">
<div class="art art6">
<h5>TEST6</h5>
<p></p>
</div>
</a>
<a href="">
<div class="art art7">
<h5>TEST7</h5>
<p></p>
</div>
</a>
<a href="">
<div class="art art8">
<h5>TEST8</h5>
<p></p>
</div>
</a>
</div>
<div class="footer">FOOTER</div>
</div>
<STYLE><!--
.container_all{width:600px;}
.container_all .header{background:navy;color:white;font-size:xx-large;text-align:center;line-height:3;}
.container_all .container_main{
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
background:lightblue;
border:none 1px black;
}
.container_all .container_main a{
text-decoration:none;
display:block;
flex:0 0 200px;
}
.container_all .container_main .art{
height:200px;
overflow:hidden;
border-radius:8px;
margin:5px;
padding:0;
}
#main .container_all .container_main .art h5{
padding:5px;display:block;border:none;background:darkcyan;color:white;
}
.container_all .container_main .art p{padding:0.5em;}
.container_all .footer{background:crimson;color:white;font-size:medium;text-align:center;line-height:1.5;}
.container_all .container_main .art1{background:hotpink;}
.container_all .container_main .art2{background:lightcyan;}
.container_all .container_main .art3{background:lightgreen;}
.container_all .container_main .art4{background:silver;}
.container_all .container_main .art5{background:wheat;}
.container_all .container_main .art6{background:lavender;}
.container_all .container_main .art7{background:lightsalmon;}
.container_all .container_main .art8{background:tan;}
--></STYLE>
コメント