レイアウトモジュール応用編
PC2カラムSP1カラムレイアウトの応用
前回、Flexboxで作るPC2カラムSP1カラムのレイアウトをやりましたが、今回はその応用でPC3カラムSP2カラムのレイアウトを作ってみたいと思います。
基本的には前回と同じやり方でOKです。
Flexboxで作るPC3カラムSP2カラムのレイアウト
デモはこちらです。
https://codepen.io/codenowa/full/wvJyRZZ
要素の振る舞いはこんな感じになればOKです。

HTMLの記述
前回と同じでdivが増えているだけです。
<section>
<div class="items">
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/612x114" alt="">
</div>
</div>
</section>
CSS(SCSS)の記述
前回と違うのは、calcのパーセント指定くらいです。
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
&::before, &::after {
box-sizing: border-box;
}
}
section {
margin: 0 2rem;
}
img {
border: 8px solid #f3f3f3;
height: auto;
width: 100%;
max-width: 100%;
}
.items {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.item {
box-sizing: border-box;
margin: 0;
width: calc(33.3333333% - 20px / 3);
margin: 0 10px 10px 0;
&:nth-child(3n) {
margin-right: 0;
}
}
@media screen and (max-width: 689px) {
img {
border: 5px solid #f3f3f3;
}
.item {
margin: 0 10px 5px 0;
width: calc(50% - 10px / 2);
&:nth-child(2n) {
margin-right: 0;
}
&:nth-child(3n) {
margin-right: 10px;
}
&:nth-child(6n) {
margin-right: 0;
}
}
}
まとめ
簡単なレスポンシブサイトであれば、前回と今回の記述で作れると思います。
異なったレイアウトもパーセント指定などの応用で対応できますので、手を動かして確認してみてください。