Как сделать такую сетку на css?

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
body { 
  padding: 25px; 
} 
 
.slider { 
  display: flex; 
  flex-wrap: wrap; 
  padding: 1px; 
} 
 
.item { 
  min-height: 50px; 
  width: 25%; 
  border: 2px dotted #ccc; 
  margin: -1px; 
} 
 
.item:nth-of-type(8n + 1), 
.item:nth-of-type(8n + 5) { 
  border-left: none; 
} 
 
.item:nth-of-type(8n + 1), 
.item:nth-of-type(8n + 2), 
.item:nth-of-type(8n + 3), 
.item:nth-of-type(8n + 4) { 
  border-top: none; 
} 
 
.item:nth-of-type(8n + 4), 
.item:nth-of-type(8n + 8) { 
  border-right: none; 
} 
 
.item:nth-of-type(8n + 5), 
.item:nth-of-type(8n + 6), 
.item:nth-of-type(8n + 7), 
.item:nth-of-type(8n + 8) { 
  border-bottom: none; 
}

<div class="slider"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
body { 
  padding: 25px; 
} 
 
.slider { 
  display: flex; 
  flex-wrap: wrap; 
} 
 
.item { 
  min-height: 50px; 
  width: 25%; 
  position: relative; 
} 
 
.item:before, 
.item:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
} 
 
.item:before { 
  width: 2px; 
  height: 100%; 
  background-image: linear-gradient(to bottom, #ccc 16%, rgba(255, 255, 255, 0) 0%); 
  background-position: left; 
  background-size: 2px 14px; 
  background-repeat: repeat-y; 
} 
 
.item:after { 
  width: 100%; 
  height: 2px; 
  background-image: linear-gradient(to right, #ccc 16%, rgba(255, 255, 255, 0) 0%); 
  background-position: top; 
  background-size: 14px 2px; 
  background-repeat: repeat-x; 
} 
 
.item:nth-of-type(8n + 1):before, 
.item:nth-of-type(8n + 5):before, 
.item:nth-of-type(8n + 1):after, 
.item:nth-of-type(8n + 2):after, 
.item:nth-of-type(8n + 3):after, 
.item:nth-of-type(8n + 4):after { 
  background: none; 
}

<div class="slider"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>