<div class="other-12">
<p class="other-12__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p class="other-12__img-1"><img src="https://placehold.jp/300x100.png?text=画像1" /></p>
<p class="other-12__img-2"><img src="https://placehold.jp/300x200.png?text=画像2" /></p>
<p class="other-12__img-3"><img src="https://placehold.jp/300x150.png?text=画像3" /></p>
</div>
.other-12
p.other-12__text #{ text }
p.other-12__img-1
img(src='https://placehold.jp/300x100.png?text=画像1')
p.other-12__img-2
img(src='https://placehold.jp/300x200.png?text=画像2')
p.other-12__img-3
img(src='https://placehold.jp/300x150.png?text=画像3')
{
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.other-12';
// 変数
#{ $BLOCK_NAME } {
display: grid;
gap: 20px;
grid-template-areas:
'text'
'img1'
'img2'
'img3'
;
@include Mq(sm) {
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
'text img1'
'text img3'
'img2 img3'
;
}
&__text {
grid-area: text;
}
&__img-1 {
grid-area: img1;
}
&__img-2 {
grid-area: img2;
}
&__img-3 {
grid-area: img3;
}
}