Как сделать галерею картинок по типу шахматной доски?

Question

Как сделать галерею из картинок на html5 таким образом, чтобы картинки занимали всю площадь страницы и были прилеплены друг к другу без полей, типа квадратов на шахматной доске?

Answer 1

Держите совсем сырую и совсем простую галерею на чистом css:

body {margin: 0; padding: 0;}

.items {display: flex; flex-flow: row wrap;}
.items input {display: none;}

.items [class*='item'] {
    width: 25%; padding-top: 25%; z-index: 0; transition: all 0.5s ease-in-out;
    background-size: cover; background-position: center center;}

.items input:checked+[class*='item'] {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 2;
}

<div class="items">
  <input id="item1" type="checkbox" />
  <label class="item1" for="item1" style="background-image:url(https://picsum.photos/id/221/200/300);"></label>
  <input id="item2" type="checkbox" />
  <label class="item2" for="item2" style="background-image:url(https://picsum.photos/id/222/200/300);"></label>
  <input id="item3" type="checkbox" />
  <label class="item3" for="item3" style="background-image:url(https://picsum.photos/id/223/200/300);"></label>
  <input id="item4" type="checkbox" />
  <label class="item4" for="item4" style="background-image:url(https://picsum.photos/id/233/200/300);"></label>
  <input id="item5" type="checkbox" />
  <label class="item5" for="item5" style="background-image:url(https://picsum.photos/id/225/200/300);"></label>
  <input id="item6" type="checkbox" />
  <label class="item6" for="item6" style="background-image:url(https://picsum.photos/id/234/200/300);"></label>
  <input id="item7" type="checkbox" />
  <label class="item7" for="item7" style="background-image:url(https://picsum.photos/id/227/200/300);"></label>
  <input id="item8" type="checkbox" />
  <label class="item8" for="item8" style="background-image:url(https://picsum.photos/id/228/200/300);"></label>
  <input id="item9" type="checkbox" />
  <label class="item9" for="item9" style="background-image:url(https://picsum.photos/id/229/200/300);"></label>
  <input id="item10" type="checkbox" />
  <label class="item10" for="item10" style="background-image:url(https://picsum.photos/id/230/200/300);"></label>
  <input id="item11" type="checkbox" />
  <label class="item11" for="item11" style="background-image:url(https://picsum.photos/id/231/200/300);"></label>
  <input id="item12" type="checkbox" />
  <label class="item12" for="item12" style="background-image:url(https://picsum.photos/id/232/200/300);"></label>
</div>

БЛОГ НА HUSL

Как сделать галерею картинок по типу шахматной доски?

Ответы (1 шт):