Галерея сетки CSS с 2 рядами и автоматическим количеством столбцовHtml

Программисты Html
Ответить
Anonymous
 Галерея сетки CSS с 2 рядами и автоматическим количеством столбцов

Сообщение Anonymous »

Я строю сайт с несколькими галереями изображений, каждая из которых с различным количеством изображений .
Что я хотел сделать, это установить фиксированное количество строк (2, в данном случае), и это автоматически генерирует количество столбцов, так что все изображения вписываются в сетку динамически. Чтобы быть в порядке, я поместил в html -файл .
Вот что я смог сделать:
.gallery {
display: grid;
grid-auto-flow: column;
grid-template-rows: auto auto;
grid-gap: 5px;
width: 100%;
}

.gallery img{
height: 180px;
width: 100%;
background-color: chartreuse;
}
< /code>

Изображение
Изображение
Изображение
Изображение
Изображение
Изображение
Изображение
Изображение

Изображение
Изображение
Изображение
Изображение
Изображение
Изображение

< /code>
The only other way I could thing of is multiple galleries (like .gallery-4cols and .gallery-3cols) but if it can be done with only one, it would be preferable.
Also, I'd like to achieve this without any JavaScript.
Thanks :^)

Подробнее здесь: https://stackoverflow.com/questions/797 ... of-columns
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»