「sizes属性」を使ったマルチカラムの例

画面が あるサイズより大きければ「3カラム」、それより小さいサイズなら「1カラム」にした例です。
PCのかたはウィンドウサイズを小さくしてみてください。

（Chromeなどで表示が切り替わらない場合は、ブラウザのキャッシュをクリアして再読込してみてください）

HTMLはこちら。

<figure>
<img srcset="img/img1-S.jpg 320w,
             img/img1-M.jpg 640w,
             img/img1-L.jpg 960w"
      sizes="(min-width: 768px) 30vw,
             100vw"
      src="img/img1-S.jpg" alt="正しい文章を入れよう"><!--スペースをコメントアウトしています

--><img srcset="img/img2-S.jpg 320w,
                img/img2-M.jpg 640w,
                img/img2-L.jpg 960w"
         sizes="(min-width: 768px) 30vw,
               100vw"
           src="img/img2-S.jpg" alt="正しい文章を入れよう"><!--

--><img srcset="img/img3-S.jpg 320w,
                img/img3-M.jpg 640w,
                img/img3-L.jpg 960w"
         sizes="(min-width: 768px) 30vw,
               100vw"
           src="img/img3-S.jpg" alt="正しい文章を入れよう"><!--

--><img srcset="img/img4-S.jpg 320w,
                img/img4-M.jpg 640w,
                img/img4-L.jpg 960w"
         sizes="(min-width: 768px) 30vw,
               100vw"
           src="img/img4-S.jpg" alt="正しい文章を入れよう"><!--

--><img srcset="img/img5-S.jpg 320w,
                img/img5-M.jpg 640w,
                img/img5-L.jpg 960w"
         sizes="(min-width: 768px) 30vw,
               100vw"
           src="img/img5-S.jpg" alt="正しい文章を入れよう"><!--

--><img srcset="img/img6-S.jpg 320w,
                img/img6-M.jpg 640w,
                img/img6-L.jpg 960w"
         sizes="(min-width: 768px) 30vw,
               100vw"
           src="img/img6-S.jpg" alt="正しい文章を入れよう">
</figure>

CSSはこちら（要点のみ）

figure {
	display:block;
	margin:3em 0;
	line-height:0;     /*imgの隙間を埋めるため*/
	text-align:center; /*imgのブロックをセンター合わせにしています*/
    }
img {
	display:inline;  /*imgに displayの指定をしていなければコレは不要です*/
	padding:1px;     /*img同士の間隔です*/
	max-width:100%;  /*自分自身のサイズより拡大しないようにしています*/
    }

<figure>要素の line-height を 0 にしているのは、子要素の <img>要素（=インラインの置換要素）の場合、親要素の line-height によって縦方向に隙間ができるためです。
親要素の行間を「line-height:0」にすれば隙間はできません。（親要素内にテキストを入れたい場合は、他の要素（spanなど）で囲んで改めて line-heightの指定をする必要がありますが）