Grid Gallery

grid-gallery.markdown

Grid Gallery

A Pen by Häñïbäl Gîrmäý on CodePen.

License.

index.html

<div id="root" class="grid-container">
  <figure v-for="i in images" class="gallery-img">
    <img :src="i" alt="">
  </figure>
<!--   <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure>
  <figure class="gallery-img"></figure> -->
</div>

script.js

const app = {
  data (){
   return{
      images:[
      "https://images.pexels.com/photos/2629233/pexels-photo-2629233.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/3738673/pexels-photo-3738673.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/3656989/pexels-photo-3656989.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/3692550/pexels-photo-3692550.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/3672776/pexels-photo-3672776.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/3933996/pexels-photo-3933996.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/5117913/pexels-photo-5117913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      "https://images.pexels.com/photos/5187131/pexels-photo-5187131.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/5103756/pexels-photo-5103756.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/824572/pexels-photo-824572.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      "https://images.pexels.com/photos/890570/pexels-photo-890570.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/268858/pexels-photo-268858.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/40884/bench-fall-park-rest-40884.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      "https://images.pexels.com/photos/159108/light-lamp-electricity-power-159108.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      "https://images.pexels.com/photos/674250/pexels-photo-674250.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    ]
   }
  }
}
Vue.createApp(app).mount("#root")

scripts

<script src="https://unpkg.com/vue@next"></script>

style.css

*{
  margin:0;
  padding:0;
}
.grid-container {
    display: grid;
  padding:1rem;
    grid-template-columns: repeat(7, 1.2fr);
    grid-template-rows: repeat(3, 15vw);
    grid-gap: 5px;
}
.gallery-img {
    width: 100%;
  display:flex;
  flex-wrap:wrap;
    height: 100%;
    background: gray;
    object-fit: cover;
}
.gallery-img img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.gallery-img:first-child {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}
@media screen and (max-width:960px){
  .grid-container{
    grid-template-columns:repeat(6,1fr)
  }
}
@media screen and (max-width:760px){
  .grid-container{
    grid-template-columns:repeat(5,1fr)
  }
}
@media screen and (max-width:560px){
  .grid-container{
    grid-template-columns:repeat(4,1fr)
  }
}
@media screen and (max-width:460px){
  .grid-container{
    grid-template-columns:repeat(3,1fr)
  }
}
@media screen and (max-width:400px){
  .grid-container{
    grid-template-columns:repeat(2,1fr);
       grid-template-rows: repeat(8, 25vw);
  }
}