maze

by Alexander Zonov

HTML

<div class="field">
  <div class="field__cell field__cell--top"></div>
  <div class="field__cell field__cell--top"></div>
  <div class="field__cell field__cell--top"></div>
  <div class="field__cell field__cell--top"></div>
  <div class="field__cell field__cell--top"></div>
  <div class="field__cell field__cell--top"></div>
  <div class="field__cell field__cell--top"></div>
  <div class="field__cell field__cell--top"></div>
  <div class="field__cell field__cell--top"></div>
  <div class="field__cell field__cell--top field__cell--right"></div>
  
  <div class="field__cell field__cell--left"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  
  <div class="field__cell field__cell--left"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  
  <div class="field__cell field__cell--left"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  
  <div class="field__cell field__cell--left"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  <div class="field__cell"></div>
  
 ...

CSS

body {
  background-color: palegreen;
}

.field {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: white;
  width: 500px;
  height: 500px;
}

.field__cell {
  flex-basis: 50px;
  height: 50px;
  box-shadow: inset 0 0 0 1px palegreen;
}

.field__cell--top {
  box-shadow: 0 -4px 0 0 black, inset 0 0 0 1px palegreen;
}

.field__cell--right {
  box-shadow: 4px 0 0 0 black, inset 0 0 0 1px palegreen;
}

.field__cell--bottom {
  box-shadow: 0 4px 0 0 black, inset 0 0 0 1px palegreen;
}

.field__cell--left {
  box-shadow: -4px 0 0 black, inset 0 0 0 1px palegreen;
}