Geek Answers Handbook

The behavior of the last elements in the grid

I have a boot grid with dynamically generated images.

If the last element is one in a row, it should be centered. And if there are two elements in a row, the second element should float to the right.

This is what I want:

Two items in a row:

A   B   D
E   F   G
H       I

One item per line:

A   B   D
E   F   G
    H

HTML code:

<div class="row">
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div>
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div> 
  <div class="col-md-4">
      <img src="img.jpg" />
  </div>  
</div>

This is what I get:

Two items in a row:

A   B   D
E   F   G
H   I

One item per line:

A   B   D
E   F   G
H

I tried it with :last-child:nth-child(odd)and :last-child:nth-child(even), but in the first line the first element is odd, in the second line the first element is even, in the third line the first element is odd again and so on.

Please note that the size of the content varies.

+6
source share
4 answers

nth-child last-child:

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col-md-6 {
  width: 33.3333%;
  height: 100px;
  border: 1px solid black;
  box-sizing: border-box;
}

.col-md-6:last-child:nth-child(3n+2) {
  /* push second child to right if last child */
  margin-left: auto;
  border-color: red;
}

.col-md-6:last-child:nth-child(3n+1) {
  /* push first child to middle if last child */
  margin: auto;
  border-color: red;
}
<div class="row">
  <div class="col-md-6">
    1
  </div>
  <div class="col-md-6">
    2
  </div>
  <div class="col-md-6">
    3
  </div>
  <div class="col-md-6">
    4
  </div>
  <div class="col-md-6">
    5
  </div>
  <div class="col-md-6">
    6
  </div>
  <div class="col-md-6">
    7
  </div>
  <div class="col-md-6">
    8
  </div>
</div><br>
<div class="row">
  <div class="col-md-6">
    1
  </div>
  <div class="col-md-6">
    2
  </div>
  <div class="col-md-6">
    3
  </div>
  <div class="col-md-6">
    4
  </div>
  <div class="col-md-6">
    5
  </div>
  <div class="col-md-6">
    6
  </div>
  <div class="col-md-6">
    7
  </div>
</div>
Hide result

bootstrap 3, 4,

.col-md-4:last-child:nth-child(3n+2),
.col-md-4:last-child:nth-child(3n+1){
  /* push second child to right if last child */
  margin-left: 33.333333%;
  border: 1px solid red;
}

bootply

+7

flex.

var numberOfFlexItmes = $('.flex').children('div').length;
if((numberOfFlexItmes%2) == 0){
     $('.flex').css('justify-content','space-between');
}
else{
     $('.flex').css('justify-content','space-around');
}
.flex{
  width: 300px;
  flex:1;
  display: flex;
  flex-wrap: wrap;
}
.flex-item{
  width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
  <div class='flex-item'>
    A
  </div>
  <div class='flex-item'>
    B
  </div>
  <div class='flex-item'>
    C
  </div>
  <div class='flex-item'>
    D
  </div>
  <div class='flex-item'>
    E
  </div>
  <div class='flex-item'>
    F
  </div>
  <div class='flex-item'>
    G
  </div>
   <div class='flex-item'>
    H
  </div>
 
</div>
Hide result
+1

, , 2 1 col-x-push-x ,

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4 col-md-push-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
  </div>
</div>


<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
    <div class="col-md-4 col-md-push-4">
      <img src="https://via.placeholder.com/50x50" />
    </div>
  </div>
</div>
0

, , flexbox.

justify-content: center row. , .

row. margin-right . , , .

:

body {
  margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
  width: 33.3333%;
}

.col:nth-last-child(2) {
  margin-right: auto;
}

img {
  width: 100%;
  height: auto;
  display: block;
}
<div class="row">
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>

</div>
<br><br>
<div class="row">
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>
  <div class="col">
    <img src="https://unsplash.it/200x200" />
  </div>


</div>
Hide result
0

More articles:


All Articles