CSS Gallery Creation

Navigation
3

I'm trying to create a gallery that I think is simple, but it's giving me a lot of work and I can not do it. I would like to know how I can do it and if you have any tips or useful information about it.

Gallery template to be created;

    
asked by anonymous 10.01.2017 / 12:24

1 answer

4

Would that be it? To increase the size of the gallery, just increase the size to <div id="galeria"> And remembering that the not selector excludes an element from the selection as, all the blocks have the same size, minus one, so I applied the same rule to all but the largest block, so using :not(.img01) I hope I have helped 

#galeria{
width:300px;
height:300px;
box-shadow:4px 4px 4px #ccc;
}
#galeria .img01{
 height:66.66%;
width:66.66%;  
  float:left;
  box-shadow:inset 4px 4px 4px #ccc;
}
#galeria div:not(.img01){
height:33.33%;
width:33.33%;  
box-shadow:inset 4px 4px 4px #ccc;
float:left;
}
<div id="galeria">
  <div class="img01"></div>
  <div class="img02"></div>
  <div class="img03"></div>
  <div class="img04"></div>
  <div class="img05"></div>
  <div class="img06"></div>
</div>

And here is another example, with margin, and shadow out. Since you did not leave any code. I'll leave the two examples: 

#galeria{
width:300px;
height:300px;

}
#galeria .img01{
 height:65%;
width:65%;  
  float:left;
 box-shadow:0px 0px 20px #747474;
}
#galeria div:not(.img01){
height:32%;
width:32%;  
box-shadow:0px 0px 20px #747474;
float:left;
}
.img02,.img03{ margin-left:1%; margin-bottom:1%;}
.img05{margin:0 1%;}
<div id="galeria">
  <div class="img01"></div>
  <div class="img02"></div>
  <div class="img03"></div>
  <div class="img04"></div>
  <div class="img05"></div>
  <div class="img06"></div>
</div>
    
10.01.2017 / 12:50
Compact and uncompress file in memory Primary key in the associative table (Many for many)