Struggling with Grid padding(?) on CSS-CodePudding

Hey so very new here but just trying to make a little tic tac toe board using a grid. I've got the layout right (I think), but my grid has padding on the bottom; I'm using the "background-color" as borders within the grid so this bottom padding is showing up. Is there a way to get rid of this? Any solution is welcome!

* {
  background-color:#f2e3bc;
}

.board {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.grid {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: #414535;
}


/* ##### THE O ##### */

.circle {
  border: 1rem solid #618985;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: .5rem;
}


/* ##### THE X ##### */

.x {
  position: relative;
  height: 150px;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.x::before,
.x:after {
  position: absolute;
  width: 100%;
  content: '';
  height: 1rem;
  background-color: #d95d39;
}

.x::before {
  transform: rotate(45deg);
}

.x::after {
  transform: rotate(-45deg);
}


/* ##### PLACEHOLDER ##### */

.empty {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<body>
  <main >
    <article id="a1">
      <div ></div>
    </article>
    <article id="a2">
      <div ></div>
    </article>
    <article id="a3">
      <div ></div>
    </article>
    <article id="b1">
      <div ></div>
    </article>
    <article id="b2">
      <div ></div>
    </article>
    <article id="b3">
      <div ></div>
    </article>
    <article id="c1">
      <div ></div>
    </article>
    <article id="c2">
      <div ></div>
    </article>
    <article id="c3">
      <div ></div>
    </article>
    <main/>
</body>

Thank you!

CodePudding user response：

The gap in the region you specified is caused by the gap style. If you want to remove the gap, disable the gap style. You don't need to use the gap style as you give height and width to the elements inside the container.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #414535;

    /* You don't need to use the gap style as you give height and width to the elements inside the container. */
    /* gap: 1.3rem; */
}

CodePudding user response：

I rearranged the table to avoid the side effects of semantic tags; I recreated the 3x3 table and did not use the gap style.

* {
  background-color: #f2e3bc;
}
.board {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.circle {
  border: 1rem solid #618985;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0.5rem;
}
.x {
  position: relative;
  height: 150px;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.x::before,
.x:after {
  position: absolute;
  width: 100%;
  content: "";
  height: 1rem;
  background-color: #d95d39;
}
.x::before {
  transform: rotate(45deg);
}
.x::after {
  transform: rotate(-45deg);
}
.empty {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container {
  display: grid;
  grid-template-rows: 200px 200px 200px;
  grid-template-columns: 200px 200px 200px;
}
body {
  display: flex;
  justify-content: center;
}
.box {
  background: #444;
  border: 1px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="stylesheet" href="style.css">
  <title>Test</title>
  <style>
    .test {
      background-color: black !important;
    }
  </style>
</head>

<body>
    <div >
      <div >
        <div ></div>
      </div>
      <div >
        <div ></div>
      </div>
      <div >
        <div ></div>
      </div>
      <div >
        <div ></div>
      </div>
      <div >
        <div ></div>
      </div>
      <div >
        <div ></div>
      </div>
      <div >
        <div ></div>
      </div>
      <div >
        <div ></div>
      </div>
      <div >
        <div ></div>
      </div>
    </div>
</body>
</html>