Блог

У меня есть цикл, который заполняет страницу картинками, но они делают это вертикально.

     {% for i in range(amount) %}
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
       <div class="contents-block">
        <div class="image"><img src="/static/assets/img/uploaded/coro.png" />
        </div>
       </div>
      </div>
    {% endfor %}
   </div>
 

Как мне сделать так, чтобы картинки заполняли всю страницу в сетке?

Ваши изображения выстраиваются в колонку, потому что все ваши <img> теги находятся под родительским столбцом. И причина, по которой правая боковая часть пуста, а одно изображение не покрывает всю ширину, связана с размером изображения.

Чтобы ответить на ваш вопрос о том, как создать сетку изображений, охватывающую всю ширину, моя идея будет состоять в том, чтобы содержать все изображения внутри div и использовать n столбцы

 <div class="images">
    {% for i in range(amount) %}
        <img src="/static/assets/img/uploaded/coro.png" />
    {% endfor %}
</div>
 

и CSS будет

 .images {
  /* Prevent vertical gaps */
  line-height: 0;
  column-count: 5; /* this depends on size, no.of images and viewport(for making it responsive) */
  column-gap: 0px;  
}

.images img {
  width: 100% !important;
  height: auto !important;
  padding: 3px;
}