How to display two pictures side by side?

the final effect is

clipboard.png




clipboard.png
to make this layout: a row of two pictures, adaptive display, here are three lines, a total of six pictures, how to write?
it"s possible to use the following methods, but it"s hard to adapt.

        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 10px 10px;
Css
Mar.20,2021

I don't know exactly what you want to write. Flex should be able to help you


the picture is wrapped with 50% DIV,div width and 100% picture width. This will be adaptive according to the width, and there may be a height blank. The picture will be stretched if the width is 100% and the height is 100%.
if you want to fix the palatable and the picture is covered with palatable and non-telescopic, you can only crop it.


  sample links  

Menu