Вопросы о том, как управлять изображениями в CodePen с использованием контейнеров с плавающей запятой, гибкой и сеточной ⇐ CSS

[Anonymous]

Когда я работал с codepen, я пытался манипулировать изображениями с плавающей запятой, гибкой и сеткой, а также пытался расположить эти изображения горизонтально и обернуть их. Но это не могло сработать хорошо. Это html-часть.
В части Flex я пытался использовать гибкую обёртку для переноса изображений, когда экран становится уже, но мне это не удалось. В разделе «Сетка» я сначала попытался использовать «grid-template-columns: auto auto auto», чтобы разместить изображения горизонтально, но это не сработало. Я не знаю, моя ли это проблема или проблема codepen. Также метод «повторения» тоже не работал.


< pre class="snippet-code-css lang-css Prettyprint-override">

Код: Выделить всё

* {
box-sizing: border-box;
}

img {
width: 100%;
}

/* -----------------------------------------
rules to make the FLOAT method work
*/

.float-img-container {
float: left;
width: 33%;
min-width: 150px;
padding: 5px;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}

/* -----------------------------------------
rules to make the FLEX method work
*/

.flex-gallery {
display: flex;
flex-wrap: wrap;
}

.flex-img-container {
width: 33%;
min-width: 150px;
padding: 1vw;
}

/* -----------------------------------------
rules to make the GRID method work
*/

.grid-gallery {
display: grid;
grid-gap: 10px;
grid-template-columns: auto auto auto；
}

.grid-img-container {
min-width: 150px;
}

/*  rule to make the GRID method wrap the images when the screen gets narrower...
*/

.grid-gallery {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Код: Выделить всё

Images side-by-side in three ways - (float, flex, grid)


1. FLOAT images side by side:


[img]https://images.unsplash.com/photo-1534531409543-069f6204c5b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2MzUyMDA&ixlib=rb-1.2.1&q=80&w=400[/img]

[img]https://images.unsplash.com/photo-1496526311033-8a80ae14a1f9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2MzU1MTQ&ixlib=rb-1.2.1&q=80&w=400[/img]

[img]https://images.unsplash.com/photo-1547140741-00d6fd251528?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2MzU2MjE&ixlib=rb-1.2.1&q=80&w=400[/img]


Note that we also use the [b]clearfix hack[/b] to take care of the layout flow, and that we add the [b]box-sizing[/b] property to make sure that the image container doesn't break due to extra padding. Try removing this code to see
the effect. Compare the [url=https://www.w3schools.com/css/tryit.asp?filename=trycss_float_images_side]w3Schools.com example.[/url]




2. FLEX images side by side:


[img]https://images.unsplash.com/photo-1534531409543-069f6204c5b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2MzUyMDA&ixlib=rb-1.2.1&q=80&w=400[/img]

[img]https://images.unsplash.com/photo-1496526311033-8a80ae14a1f9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2MzU1MTQ&ixlib=rb-1.2.1&q=80&w=400[/img]

[img]https://images.unsplash.com/photo-1547140741-00d6fd251528?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2MzU2MjE&ixlib=rb-1.2.1&q=80&w=400[/img]





3.  GRID images side by side:


[img]https://images.unsplash.com/photo-1534531409543-069f6204c5b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2MzUyMDA&ixlib=rb-1.2.1&q=80&w=400[/img]

[img]https://images.unsplash.com/photo-1496526311033-8a80ae14a1f9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2MzU1MTQ&ixlib=rb-1.2.1&q=80&w=400[/img]

[img]https://images.unsplash.com/photo-1547140741-00d6fd251528?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2MzU2MjE&ixlib=rb-1.2.1&q=80&w=400[/img]





photo credits:
[list]
[*]Atharva Tulsi - [url=https://unsplash.com/photos/XQKd1UN7gUU]https://unsplash.com/photos/XQKd1UN7gUU[/url]
[*]Johannes Plenio - [url=https://unsplash.com/photos/a72o8w9HC2w]https://unsplash.com/photos/a72o8w9HC2w[/url]
[*]Marc Pell - [url=https://unsplash.com/photos/oWRVjFQIwAY]https://unsplash.com/photos/oWRVjFQIwAY[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/790 ... -grid-cont