画面サイズの変更によって、3列2行から2列3行のレイアウトに変化します。
デモ
See the Pen layout-3 by logsuke (@design-list) on CodePen.
コード
<section>
<div class="section-container">
<div class="bg content-1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</section>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
:root {
--nav-height: 8rem;
--max-width: 1024px;
--container-padding: 0 4rem;
--gap: 2rem;
}
/* section */
.section-container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
margin-top: 5rem;
}
.bg {
border: 5px solid rgb(55, 53, 53);
position: relative;
opacity: 0.5;
background-image: radial-gradient(#e331dd 2px, #e5e5f7 2px);
background-size: 40px 40px;
}
/* gridを使った折返し */
.content-1 {
width: 100%;
padding: 2rem;
display: grid;
grid-gap: var(--gap);
grid-template-columns: repeat(3, minmax(100px, 300px));
grid-template-rows: repeat(2, minmax(100px, 300px));
justify-content: center;
}
.item {
width: 100%;
height: 100%;
background: rgba(233, 181, 255, 0.608);
position: relative;
}
.item::before {
content: 'item';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
font-size: 2rem;
}
@media screen and (max-width: 768px) {
.content-1 {
grid-template-columns: repeat(2, minmax(100px, 300px));
grid-template-rows: repeat(3, minmax(100px, 300px));
}
}