How do I target the first and last item in a grid row of dynamic records?

Question

Here are the tools I use:

• Vuejs
• JQuery Packery with breadboard layout

I create a page that takes content from json and fills the home page with messages, products and pages in a single loop. Each object in the cycle is ordered by date using lodash and is added to the page after the user creates a new message, product or page in the backend.

By clicking on the product, information and the content field next to the container with product information will open. Due to the nature of the interaction, I need to make sure that I only target divs that are to the left and right of the lines. I am using Vue JS to render content in a component. below is an illustration of what I'm working with:

, , css , , . , , .

/html, :

<div id="start-grid">

      <div class="grid__item grid_item-home large--one-third medium--one-whole no-padding" v-for="(key, index) in productsOrderBy" :class="{ influence: productsOrderBy[index].influence === true, about: productsOrderBy[index].about === true, product_item: productsOrderBy[index].vendor}">

        <div v-if="productsOrderBy[index].vendor" class="shop-item">

          <router-link v-bind:data-id="productsOrderBy[index].id" :to="'/products/'+ index" active-class="active" class="product grow">
            <div class="inner-container relative">
              <div class="pad-normal absolute top-0 left-0 z-2 large--one-whole product-color product-info">
                <p class="univers uppercase smaller body-size">
                  Shop
                 </p>
                <p class="lyon-text">{{productsOrderBy[index].title}}</p>
                <p class="univers uppercase smaller body-size buy">
                  Buy now
                 </p>
              </div>
              <div @click="setActive($event)" v-bind:data-id="productsOrderBy[index].id" class="z-1 relative gallery grow" v-bind:id="productsOrderBy[index].id">
                <img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].images[0].src" v-bind:alt="productsOrderBy[index].images[0].id">
              </div>

            </div> 
            <transition 
                  v-if="$route.params.id == index"
                  appear
                  name="slide-fade">
                  <div class="absolute z-3 top-0 grid__item large--one-whole card">
                    <router-view :key="$route.params.id"></router-view>
                    </div>
                </transition>     
          </router-link>

        </div>

        <div v-else-if="productsOrderBy[index].about" :style="{ 'background-color': '+productsOrderBy[index].tags+' }" class="inner-container relative blog-index__block" :data-color="productsOrderBy[index].tags">

            <div @click="playVideo($event)" class="pad-normal z-1 large--one-whole">
                <p class="univers uppercase smaller body-size">
                  {{ productsOrderBy[index].title }}
                </p>
                <p class="lyon-text" v-html="productsOrderBy[index].content.html">
                  {{ productsOrderBy[index].content.html }}
                </p>
            </div>

        </div>

        <div v-else class="inner-container relative blog-index__block" :data-color="productsOrderBy[index].tags">

              <div class="pad-normal z-1 large--one-whole">
                  <p class="univers uppercase smaller body-size">
                    Influence
                  </p>
                  <p class="lyon-text">
                    {{ productsOrderBy[index].title }}
                  </p>
              </div>

              <img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].media.image">

        </div>

    </div>

  </div>

- , ?

nth-child, nth-of-type, , , , Javascript .

Answer 1

, ? nth-child, .

$(function(){
 $('button').click(function(){
  $('.wrap').append('<div class="grid-col"></div>');
 });
});

.grid-col {
  height: 200px;
  width: 32.26%;
  margin: 1% 0 1% 1.6%;
  background: #ccc;
  float: left;
}
.grid-col:nth-child(3n+1){
 margin-left: 0;
 background-color: red;
}
.grid-col:nth-child(3n){
 background-color: red;
}
.wrap {
  width: 80%;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Add Column</button>
<div class="wrap">
  <div class="grid-col blog"></div>
  <div class="grid-col page"></div>
  <div class="grid-col blog"></div>
  <div class="grid-col product"></div>
  <div class="grid-col blog"></div>
  <div class="grid-col page"></div>
  <div class="grid-col blog"></div>
  <div class="grid-col product"></div>
  <div class="grid-col blog"></div>
</div>

Hide result