title: Border inside Grid Layout
body: <p>I have a CSS grid that represents the tic-tac-toe game. I wanted to put an border only inside the grid. Today, I proceed in this way:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --border: 2px dashed #393939;
    --symbol-color: #FF7F5B;
  }
  
  .grid {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, calc(100%/3));
    grid-template-rows: repeat(3, calc(100%/3));
  }
  
  .child {
    display: flex;
    align-items: center;
    align-content: center;
    color: var(--symbol-color);
    font-size: 2.5rem;
  }
  
  .child:nth-child(1),
  .child:nth-child(2),
  .child:nth-child(3) {
    border-bottom: var(--border);
  }
  
  .child:nth-child(7),
  .child:nth-child(8),
  .child:nth-child(9) {
    border-top: var(--border);
  }
  
  .child:nth-child(1),
  .child:nth-child(4),
  .child:nth-child(7) {
    border-right: var(--border);
  }
  
  .child:nth-child(3),
  .child:nth-child(6),
  .child:nth-child(9) {
    border-left: var(--border);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
    &lt;div class="child"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Result:</p>
  
  <p><img src="https://i.stack.imgur.com/p3G7c.jpg" alt="Result"></p>
  
  <p>This solution works but I find it unattractive. Do you have an idea to refactor this solution?</p>