html – How to align a tile with CSS?

Question:

I have the following code:

.exemplo {
  width: 800px;
}
img {
  width:100%;
  height: 100%;
}
.home-videos {
   /*@extend .col-md-3;*/
   width: 200px;
   height: 150px;
   padding: 5px !important;
   box-sizing: border-box;
   margin: 0px;
   float:left;
}
.home-videos:nth-child(2), .home-videos:last-child{
   /*@extend .col-md-6;*/
    width: 400px;
    height: 300px;
 }
.home-videos:last-child{
    height: 150px;
 }
 .videos-descript {
    position: absolute;
    display: none;
 }
<div class="exemplo">
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="https://pbs.twimg.com/profile_images/758084549821730820/_HYHtD8F.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
 </div>

I would like the "figure" that is out of alignment, to rise below the first image, aligning.

Note: Each 'figure' is a WordPress post, so there are no other divs to shape the mosaic.

Answer:

I suggest you work with grid in this case. With this CSS style it becomes easier to assemble mosaics and alignments as you want, for example.

In your CSS, I added grid styles and aligned the elements as indicated in the question, treating some <figure> individually (the 2nd, the 5th and the last, as they have peculiar dimensions and/or placements):

.exemplo {
   width: 800px;
   display: grid;
   grid-template-columns: repeat(4, 1fr); 
   grid-gap: 0px; 
   background-color: #fff; 
   color: #444; 
}
img {
   width:100%;
   height: 100%;
}
.home-videos {
   /*@extend .col-md-3;*/
   width: 200px;
   height: 150px;
   padding: 5px !important;
   box-sizing: border-box;
   margin: 0px;
   float:left;
}
.home-videos:nth-child(2){
   /*@extend .col-md-6;*/
   width: 400px;
   height: 300px;
   
   grid-column: 2 / 3;
   grid-column-end:span 2;
   grid-row: 1 / 2;
   grid-row-end:span 2;
}

.home-videos:nth-child(5){
   grid-row-start: 2;
   grid-column: 1;
}

.home-videos:last-child{
   width: 400px;
   height: 150px;
   /*@extend .col-md-6;*/
   
   grid-column: 3 / 4;
   grid-column-end:span 2;
}
.videos-descript {
   position: absolute;
   display: none;
}
<div class="exemplo">
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>

  <figure class="home-videos">
    <img src="https://pbs.twimg.com/profile_images/758084549821730820/_HYHtD8F.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>

  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>

  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
 </div>

Hack for MSIE 9+ and Edge:

Add this JS in the <head> :

<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>

And this CSS at the end of the style or external .css file:

html[data-useragent*='rv:11.0'] .home-videos:nth-child(5),
html[data-useragent*='Edge'] .home-videos:nth-child(5),
html[data-useragent*='MSIE 10.0'] .home-videos:nth-child(5),
html[data-useragent*='MSIE 9.0'] .home-videos:nth-child(5){
  position: absolute;
  top: 158px;
  left: 8px;
}
Post Views: 2
Scroll to Top