How would I set a grid inside the box?

<style type="text/css">

.outer {
  max-width:464px;  /*476*/
  border:solid 6px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
  position: relative;
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:6px;
  margin-bottom: -9px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 0px;
  margin-left: 26px;
  margin-right: 20px;
}

  .hr4 {
  display: block;
  padding-bottom: 372px;
  border-top: 6px solid #38761d;
  margin-top: 27px;
}


</style>

</head>
<body>

<div class="outer">
    <p class="hr3">text text text text<span></span></p>


<div class="hr4"></div>


</div>

</body>
</html>

It depends on what you want to use the grid for. Could you please explain a little bit what you are building here?

A grid with maybe images inside each of them.

And ad sign.

Not really a grid, but just the border of A grid. where I can place images in each of them.

When you collect the images and the ad sign to put in the box, the way you place these items in the box will form the grid. You don’t make a grid and then fit the images inside. Do you have some images to use?

Do you think I can make this into 9 boxes and make it bigger?

I did it:

I need help placing grid on top of the box.

<style type="text/css">

.outer {
  max-width:464px;  /*476*/
  border:solid 6px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
  position: relative;
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:6px;
  margin-bottom: -9px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 0px;
  margin-left: 26px;
  margin-right: 20px;
}

  .hr4 {
  display: block;
  padding-bottom: 372px;
  border-top: 6px solid #38761d;
  margin-top: 27px;
}

div.gridcontainer
{
    width: 476px;
    line-height: 0;
    border-right:6px solid red;
    border-bottom:6px solid red;
}

div.griditem
{
    display:inline-block;           
    border-left:6px solid red;
    border-top:6px solid red;
    width:150px;
    height: 155px;


}
</style>

</head>
<body>

<div class="outer">
    <p class="hr3">text text text text<span></span></p>
<div class="hr4"></div>
</div>
<div class="gridcontainer">
   <div class="griditem"></div> <div class="griditem"></div> <div class="griditem"></div> <div class="griditem"></div> <div class="griditem"></div> <div class="griditem"></div> <div class="griditem"></div> <div class="griditem"></div> <div class="griditem"></div>


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

Good for you for figuring out a grid without help. Do you want to fix the gaps on the right side of the boxes?

Do you mean above the box, or inside the box?

How do I fix the gaps? There are 6.

There’s still a gap here. 3 of them

Do some math. I made a diagram for you but my laptop froze. So here’s an explanation. Look at your first grid with the 16 (4 x4) boxes. The whole thing is 76 px.

Each small box is 18 px + 1px on the left. That makes it 19px wide. What is 4 x 19?

76…

but this one has 3 tiny gaps.

Right. So in your latest 3 x 3 grid each small bos is 150px wide + 6px for the left border. What is 156 x 3?

Compare that number with the width of the grid.

468…

And you made the grid 470px wide - so there’s a 2px gap.

476 wide. 2px gap

No. You don’t count the 6px border on the right side of the grid as part of its inside where you put the boxes.

156 x 26

476 x 384