グリッドレイアウトの活用例です。
画像とテキストを横並びにするソースコードです。1列につき、画像で1つのグリッド、テキストで1つのグリッド、計2つのグリッドです。スマホでは「display: block」を指定し、すべて1列の縦並びにしています。
HTML
<div class="grid2x1">
<img src="画像のURL" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
CSS（PC）
.grid2x1 {
display: grid;
grid-template-columns: 20% 80%;
margin: 2%;
}
.grid2x1 p {
display: grid;
align-items: center;
margin: 5%;
}
CSS（スマホ）
.grid2x1 {
display: block;
}
.grid2x1 p {
display: block;
align-items: center;
margin: 2% 2% 9%;
}
画像とテキストを縦並びにするソースコードです。1列につき、画像とテキストがセットで1つのグリッド、計3つのグリッドです。スマホでは「display: block」を指定し、すべて1列の縦並びにしています。
HTML
<div class="grid3x1">
<div>
<img src="画像のURL" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div>
<img src="画像のURL" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<div>
<img src="画像のURL" alt="">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
CSS（PC）
.grid3x1 {
display: grid;
grid-template-columns: calc( 100% / 3 ) calc( 100% / 3 ) calc( 100% / 3 );
}
.grid3x1 div {
margin: 5%;
}
CSS（スマホ）
.grid3x1 {
display: block;
}
.grid3x1 div {
margin: 2% 2% 9%;
}
画像のみをグリッド状に配置するソースコードです。画像1つにつき1つのグリッドです。
HTML
<div class="item5">
<span><img src="画像のURL" alt=""></span>
<span><img src="画像のURL" alt=""></span>
<span><img src="画像のURL" alt=""></span>
<span><img src="画像のURL" alt=""></span>
<span><img src="画像のURL" alt=""></span>
</div>
CSS（PC）
.item5 {
display: grid;
grid-template-columns: calc( 100% / 3 ) calc( 100% / 3 ) calc( 100% / 3 );
grid-template-rows: 50% 50%;
}
.item5 span {
margin: 5%;
}
CSS（スマホ）
.item5 {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: calc( 100% / 3 ) calc( 100% / 3 ) calc( 100% / 3 );
}
.item5 span {
margin: 2%;
}