uneven image gallery css code example

Example 1: uneven image gallery css

@media (max-width: 1000px) {   #images-wrapper {   -moz-column-count:    3;   -webkit-column-count: 3;   column-count:         3;   }  }  @media (max-width: 800px) {   #images-wrapper {   -moz-column-count:    2;   -webkit-column-count: 2;   column-count:         2;   }  }  @media (max-width: 400px) {   #images-wrapper {   -moz-column-count:    1;   -webkit-column-count: 1;    column-count:        1;   }  }

Example 2: uneven image gallery css

<div id=”images-wrapper”>    <img src=”path/to/your/img0.example” alt=”picture 1" />    <img src=”path/to/your/img2.example” alt=”picture 2" />    <img src=”path/to/your/img2.example” alt=”picture 3" />    <img src=”path/to/your/img2.example” alt=”picture 4" />    <img src=”path/to/your/img2.example” alt=”picture 5" />    … </div>

Example 3: uneven image gallery css

#images-wrapper {       line-height: 0;           -webkit-column-count: 5;        -webkit-column-gap: 0px;        -moz-column-count: 5;    -moz-column-gap: 0px;     column-count: 5;         column-gap: 0px;    }  #images-wrapper img {       width: 100% !important;       height: auto !important;  }  #images-wrapper{       display:inline-block;       margin-right: auto;       margin-left: auto;  }