I want to draw line in between a css grid and make a tic tac toe board-CodePudding

I am currently making tic tac toe game and want to draw a grid that looks like this but do not know how to do so.

.grid-holder {
    display: flex;
    justify-content: center;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    column-gap: 5px;
    row-gap: 5px;

}

.grid {
    border: 2px solid red;
    text-align: center;
    padding: 20px;
    cursor: pointer;
}

<div >
            <div >1</div>
            <div >2</div>
            <div >3</div>
            <div >4</div>
            <div >5</div>
            <div >6</div>
            <div >7</div>
            <div >8</div>
            <div >9</div>
</div>

CodePudding user response：

You can use a css grids with a :nth-child(number) css property to target specific div cells.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border-spacing: 10px;
}

.grid > div {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 30px 5px;
}

.grid > div:nth-child(1) {
  border-top: none;
  border-left: none;
}

.grid > div:nth-child(1) {
  border-right: 2px solid black;
}
.grid > div:nth-child(4) {
  border-right: 2px solid black;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}
.grid > div:nth-child(7) {
  border-right: 2px solid black;
}
.grid > div:nth-child(3) {
  border-left: 2px solid black;
}
.grid > div:nth-child(6) {
  border-left: 2px solid black;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}
.grid > div:nth-child(9) {
  border-left: 2px solid black;
}

.grid > div:nth-child(5) {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

<div >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

CodePudding user response：

You can use one gradient to achieve this. I also made your code easier to adjust. You can easily adjust the gap and the width. and everything else will follow:

.grid-holder {
  --g: 5px; /* the gap */
  width: 300px; /* the size */
  
  display: grid;
  aspect-ratio: 1;
  grid-template-columns: 1fr 1fr 1fr;
  margin: auto;
  gap: var(--g);
  background:
   conic-gradient(at calc(100% - var(--g)) calc(100% - var(--g)),#000 75%,#0000 0)
   0 0/calc((100%   var(--g))/3) calc((100%   var(--g))/3)
}

.grid {
  text-align: center;
  padding: 20px;
  cursor: pointer;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
</div>