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

[Anonymous]

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

* {
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:









Note that we also use the clearfix hack to take care of the layout flow, and that we add the box-sizing 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 w3Schools.com example.




2. FLEX images side by side:












3. GRID images side by side:












photo credits:

• Atharva Tulsi - https://unsplash.com/photos/XQKd1UN7gUU
• Johannes Plenio - https://unsplash.com/photos/a72o8w9HC2w
• Marc Pell - https://unsplash.com/photos/oWRVjFQIwAY

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