くまだどうも、くまだです。
grid-templateプロパティを使って、コンテンツの配置を並べ替え。
grid-template
grid-templateプロパティは、以下の3つをまとめて指定する記述です。
- ggrid-template-rows：横方向（行）のグリッドの高さ指定
- grid-template-columns：縦方向（列）のグリッドの幅指定
- grid-templalte-areas：グリッドアイテムの位置を名前をつけて配置
例えばPC画面とSP画面でアイテムの位置が異なるような配置でも、grid-templateを使って配置することができます。
例としては以下のような場合。
<section class="section">
<h2 class="title1">タイトル</h2>
<div class="container">
<div class="box">
<div class="img"></div>
<h3>タイトル</h3>
<p>テキスト</p>
<button class="button2">ボタン</button>
</div>
<div class="box">
<div class="img"></div>
<h3>タイトル</h3>
<p>テキスト</p>
<button class="button2">ボタン</button>
</div>
</div>
<button class="button1">ボタン</button>
</section>.section {
max-width: 750px;
margin-right: auto;
margin-left: auto;
padding: 80px;
display: grid;
row-gap: 24px;
grid-template:
"title"
"main"
"button"
;
}
@media (min-width: 992px) {
.section {
grid-template:
"title button"
"main main"
;
}
}
.container {
display: grid;
gap: 16px;
}
@media (min-width: 992px) {
.container {
grid-template-columns: repeat(2,1fr);
}
}
.box {
padding: 20px;
border: 1px solid black;
display: grid;
row-gap: 10px;
}
.img {
width: 100%;
height: 100px;
background-color: orange;
}
.button1 {
display: block;
min-width: 100px;
height: 30px;
background-color: burlywood;
}
.button2 {
display: block;
height: 30px;
background-color: chocolate;
}
.title1 {
grid-area: title;
}
.container {
grid-area: main;
}
.button1 {
grid-area: button;
justify-self: center;
}
@media (min-width: 992px) {
.button1 {
justify-self: flex-end;
}
}左がPC画面幅、右がSP画面幅のレイアウトです。
grid-areaプロパティで、グリッドアイテムにそれぞれ名前を付けています。
.title1 {
grid-area: title;
}
.container {
grid-area: main;
}
.button1 {
grid-area: button;
}
grid-templateプロパティで、それぞれのアイテムの位置を指定します。
.section {
display: grid;
grid-template:
"title"
"main"
"button"
;
}
@media (min-width: 992px) {
.section {
grid-template:
"title button"
"main main"
;
}
}Gridを使わない場合だと、display:contents;やorderプロパティと組み合わせて配置を変えることもできます。
ここまで読んでくださりありがとうございました。