title: How can I target first and last item in a grid row of dynamic entries?
body: <p>Here are the tools I am using:</p>
  
  <ul>
  <li>Vuejs</li>
  <li>Jquery Packery with masonry layout</li>
  </ul>
  
  <p>I am building a page that takes content from json and populates the homepage with posts, products and pages in one loop. Each object in the loop is ordered by date with lodash and gets added into the page once a user creates a new post, product or page in the backend.</p>
  
  <p>When clicking on a product it will open info and a content box next to its container with product info. Because of the nature of the interaction I need to make sure I only target divs that are at the far left and right of the rows. I am using Vue JS to render the content in a component. below is an illustration of what I am working with:</p>
  
  <p><a href="https://i.stack.imgur.com/QSNsh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QSNsh.jpg" alt="enter image description here"></a></p>
  
  <p>As you can see here, I only want to be able to target css on any items that are at the far left or right if the middle column. The trouble is the content is dynamic and its flowing left to right.</p>
  
  <p>Here is the markup/html I am using:</p>
  
  <pre><code>&lt;div id="start-grid"&gt;
  
        &lt;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}"&gt;
  
          &lt;div v-if="productsOrderBy[index].vendor" class="shop-item"&gt;
  
            &lt;router-link v-bind:data-id="productsOrderBy[index].id" :to="'/products/'+ index" active-class="active" class="product grow"&gt;
              &lt;div class="inner-container relative"&gt;
                &lt;div class="pad-normal absolute top-0 left-0 z-2 large--one-whole product-color product-info"&gt;
                  &lt;p class="univers uppercase smaller body-size"&gt;
                    Shop
                   &lt;/p&gt;
                  &lt;p class="lyon-text"&gt;{{productsOrderBy[index].title}}&lt;/p&gt;
                  &lt;p class="univers uppercase smaller body-size buy"&gt;
                    Buy now
                   &lt;/p&gt;
                &lt;/div&gt;
                &lt;div @click="setActive($event)" v-bind:data-id="productsOrderBy[index].id" class="z-1 relative gallery grow" v-bind:id="productsOrderBy[index].id"&gt;
                  &lt;img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].images[0].src" v-bind:alt="productsOrderBy[index].images[0].id"&gt;
                &lt;/div&gt;
  
              &lt;/div&gt; 
              &lt;transition 
                    v-if="$route.params.id == index"
                    appear
                    name="slide-fade"&gt;
                    &lt;div class="absolute z-3 top-0 grid__item large--one-whole card"&gt;
                      &lt;router-view :key="$route.params.id"&gt;&lt;/router-view&gt;
                      &lt;/div&gt;
                  &lt;/transition&gt;     
            &lt;/router-link&gt;
  
          &lt;/div&gt;
  
          &lt;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"&gt;
  
              &lt;div @click="playVideo($event)" class="pad-normal z-1 large--one-whole"&gt;
                  &lt;p class="univers uppercase smaller body-size"&gt;
                    {{ productsOrderBy[index].title }}
                  &lt;/p&gt;
                  &lt;p class="lyon-text" v-html="productsOrderBy[index].content.html"&gt;
                    {{ productsOrderBy[index].content.html }}
                  &lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div v-else class="inner-container relative blog-index__block" :data-color="productsOrderBy[index].tags"&gt;
  
                &lt;div class="pad-normal z-1 large--one-whole"&gt;
                    &lt;p class="univers uppercase smaller body-size"&gt;
                      Influence
                    &lt;/p&gt;
                    &lt;p class="lyon-text"&gt;
                      {{ productsOrderBy[index].title }}
                    &lt;/p&gt;
                &lt;/div&gt;
  
                &lt;img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].media.image"&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone see how this can be achieved?</p>
  
  <p>I have looked at nth-child, nth-of-type but they do not work because the content is dynamic so I have thought it might be achievable through Javascript instead by counting the items.</p>