html - 我怎样才能得到这样的网格？

Question

正如这个线程的标题已经说的那样，我想得到以下类型的网格：

带有箭头的单元格应该连接起来，并且应该包含来自段落元素的文本，并且图片应该位于这些角落。上半部分应包含与下半部分不同的图片和文字。

这也是一个代码示例，我想将段落（div）的单元格相互连接，以便三个 div 包含一个环绕图片的文本，就像它在下面的 microsoft-word 图片中一样：

代码：（https://jsfiddle.net/kgeht5dq/6/）

.main-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
}

.row {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100;
}

#img {
  width: 100%;
  height: 100%;
}

<div class='main-container'>
  <!-- this is the first mini container -->
  <div class='mini-container'>
    <!-- this is the first row text+image -->
    <div class='row first'>
      <div>
        <p>
          t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
          content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
          versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </p>
      </div>
      <div>
        <img id='img' src='https://i.stack.imgur.com/od6Ln.jpg'>
      </div>
    </div>
    <!-- this is the second row text+text -->
    <div class='row second'>
      <div>
        <p>
          t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
          content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
          versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </p>
      </div>
      <div>
        <p>
          t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
          content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
          versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </p>
      </div>
    </div>
  </div>
  <!-- this is the second mini container -->
  <div class='mini-container'>
    <!-- this is the third row image+text -->
    <div class='row third'>
      <div>
        <img id='img' src='https://i.stack.imgur.com/od6Ln.jpg'>
      </div>
      <div>
        <p>
          t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
          content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
          versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </p>
      </div>
    </div>
    <!-- this is the forth row text+text -->
    <div class='row forth'>
      <div>
        <p>
          t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
          content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
          versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </p>
      </div>
      <div>
        <p>
          t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
          content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
          versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
        </p>
      </div>
    </div>
  </div>

</div>

标签： htmlcssparagraph