/* A border-collapse effect for flex-wrap, with no JavaScript.
   Borders would double up where two boxes meet, and you cannot know which elements
   wrapped without measuring. A box-shadow pair draws the line centred on the edge
   instead: the outset half overlaps the neighbour, the inset half stays inside. */

body {
  margin: 0;
  padding: 1.5rem;
  background: #fff;
  color: #111;
  font: 16px/1.5 ui-sans-serif, system-ui, sans-serif;
}

.note {
  margin: 0 0 1rem;
  color: #666;
  font-size: 0.8rem;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  /* Compensates for the outset half of the shadow. */
  margin: 1px;
}

.box {
  flex: 1 1 8rem;
  padding: 2rem 1rem;
  text-align: center;
  box-shadow:
    0 0 0 1px #111,
    inset 0 0 0 1px #111;
}