如何将img网格转换为图库

Question

是否可以将此图片网格转换为图库？

我已多次尝试但没有成功。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

img {
  width: 100%;
}

.header {
  text-align: center;
  padding: 32px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

.column img {
  margin-top: 12px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    width: 100%;
  }
}

<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="row"> 
  <div class="column">
    <img src="/w3images/wedding.jpg">
    <img src="/w3images/rocks.jpg">
    <img src="/w3images/falls2.jpg">
    <img src="/w3images/paris.jpg">
    <img src="/w3images/nature.jpg">
    <img src="/w3images/mist.jpg">
    <img src="/w3images/paris.jpg">
  </div>

  <div class="column">
    <img src="/w3images/underwater.jpg">
    <img src="/w3images/ocean.jpg">
    <img src="/w3images/wedding.jpg">
    <img src="/w3images/mountainskies.jpg">
    <img src="/w3images/rocks.jpg">
    <img src="/w3images/underwater.jpg">
  </div>

  <div class="column">
    <img src="/w3images/wedding.jpg">
    <img src="/w3images/rocks.jpg">
    <img src="/w3images/falls2.jpg">
    <img src="/w3images/paris.jpg">
    <img src="/w3images/nature.jpg">
    <img src="/w3images/mist.jpg">
    <img src="/w3images/paris.jpg">
  </div>

  <div class="column">
    <img src="/w3images/underwater.jpg">
    <img src="/w3images/ocean.jpg">
    <img src="/w3images/wedding.jpg">
    <img src="/w3images/mountainskies.jpg">
    <img src="/w3images/rocks.jpg">
    <img src="/w3images/underwater.jpg">
  </div>
</div>