body { padding: 1rem; font-family: arial, sans-serif; }

.weather {
   overflow: hidden;
  
  // settins for internal borders
   --gap-v: .25em;
   --gap-h: .25em;
   --line-offset: calc(var(--gap-v) / 2);
   --line-thickness: 1px;
   --line-thickness-outer: 2px;
   --line-color: #ddd;
  
  // other settings
  --cell-padding: .2rem;
  
  font-size: .8rem;

  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: var(--gap-v) var(--gap-h);
}
.weather > * { background: #fff; }

.time { grid-row: 1 / 2; }
.forecast-item { grid-row: 2 / 3; }
.temp { grid-row: 3 / 4; }

.time, .forecast-item, .temp {
  display: flex;
  justify-content: center;
  padding: var(--cell-padding);
}


// style content of cells
.time > span:nth-child(2) {
  font-size: .75em;
  display: none;
}
.forecast-item > img {
  max-width: 50%;
  min-width: 32px;
}

// Add Grid Lines

// Make Grid Items Control Absolute Pseudo Positioning
.weather {
  border: var(--line-thickness-outer) solid var(--line-color);
}
.weather > * {
  position: relative;
}
// Pseudo Element Shared Styling
.weather > div::before, 
.weather > div::after {
  content: '';
  position: absolute;
  background-color: var(--line-color);
  z-index: 1;
}
// Row Borders
.weather > div::after {
  inline-size: 100vw;
  block-size: var(--line-thickness);
  inset-inline-start: 0;
  inset-block-start: calc(var(--line-offset) * -1);
}

// Column Borders
.weather > div::before {
  inline-size: var(--line-thickness);
  block-size: 100vh;
  inset-block-start: 0;
  inset-inline-start: calc(var(--line-offset) * -1);
}