Handle distance other items similar new item CSS - html

Question

When a new item I want handle the other items will have a distance similar to the new item, but only processed by css okay? If possible, I do not want to handle by adding the distance available for the item as this is in contravention of the design...................................................................
Thanks for your help!
.list_item_grid {
padding: 0 7px;
margin-bottom: 63px;
list-style: none;
}
.list_item_grid .item {
float: left;
width: calc(100%/4 - 2px);
margin-right: 2px;
margin-bottom: 7px;
}
.list_item_grid .item:last-child {
margin-right: 0;
}
.list_item_grid .thumb_img {
height: 180px;
position: relative;
overflow: hidden;
}
.list_item_grid img {
position: absolute;
width: auto;
max-height: 100%;
height: auto;
border: none;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.list_item_grid a {
text-decoration: none;
}
.list_item_grid .date {
padding: 9px 14px 3px;
color: #7b7b7b;
}
.list_item_grid .txt_link {
margin-top: 0;
padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
text-decoration: none;
color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
content: "NEW"
}
<ul class="list_item_grid clearfix">
<li class="item new">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
</ul>
Link code

Answer 1

I have Completed it, Check out this
Here i added the class name for the paragraphs, then i add some css code.
.list_item_grid {
padding: 0 7px;
margin-bottom: 63px;
list-style: none;
}
.list_item_grid .item {
float: left;
width: calc(100%/4 - 2px);
margin-right: 2px;
margin-bottom: 7px;
}
.list_item_grid .item:last-child {
margin-right: 0;
}
.list_item_grid .thumb_img {
height: 180px;
position: relative;
overflow: hidden;
}
.list_item_grid img {
position: absolute;
width: auto;
max-height: 100%;
height: auto;
border: none;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.list_item_grid a {
text-decoration: none;
}
.list_item_grid .date {
padding: 9px 14px 3px;
color: #7b7b7b;
}
.list_item_grid .txt_link {
margin-top: 0;
padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
text-decoration: none;
color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
content: "NEW"
}
.para{
height: 20px;
margin: 0px;
padding: 15px 0px;
}
<ul class="list_item_grid clearfix">
<li class="item new">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
<li class="item">
<p class="para"></p>
<a href="#">
<div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
<div class="contents">
<p class="date">2018/08/03</p>
<p class="txt_link">abc</p>
</div>
</a>
</li>
</ul>