写一段九宫格的前端代码

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="box"></div>
    </div>
    <div class="col-sm-4">
      <div class="box"></div>
    </div>
    <div class="col-sm-4">
      <div class="box"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="box"></div>
    </div>
    <div class="col-sm-4">
      <div class="box"></div>
    </div>
    <div class="col-sm-4">
      <div class="box"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="box"></div>
    </div>
    <div class="col-sm-4">
      <div class="box"></div>
    </div>
    <div class="col-sm-4">
      <div class="box"></div>
    </div>
  </div>
</div>
<style>
  .box {
    height: 100px;
    border: 1px solid black;
    margin-bottom: 10px;
  }
</style> 
<p>这段前端代码实现了一个九宫格布局，其中每个格子都是一个类名为“box”的div元素。通过Bootstrap的栅格系统，每行分为三个等宽的列，每个列包含一个“box”元素。在样式中，定义了每个“box”元素的高度为100像素，边框为1像素黑色实线，下边距为10像素。</p>