Reactjs React语义ui多列多行表单

我需要创建多列、多行表单。我正在考虑使用网格或表格方法。哪种方法更好？为什么？还有别的办法吗

谢谢

---

我为这项工作所做的是在第一个代码笔中使用3列。第二个代码笔是使用2列。您可以在示例中看到。看看什么对你更好

我更喜欢使用网格进行响应性设计。此表仅限于此方面

Ban配置文件
名字
名字
名字
名字
编辑
你做了什么？单击以保存

拯救

为什么不简单地使用

并将

宽度

传递给每个

？例子：

<h2>Ban profile</h2>
    <div class="ui stackable grid">
      <div class="two wide column">
        <img class="ui small bordered image" src="https://s9.postimg.cc/xkxqxrl5r/IMG_20170921_175941.jpg">
      </div>
      <div class="six wide column">
        <form name="UserForm" class="ui form aligned">
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
      </div>
      <div class="one wide column"></div>
      <div class="six wide column">
        <div class="ui form aligned">
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
        </div>
      </div>
    </div>
    <button class="ui primary button">
     edit
    </button>
    </div>
    </div>
    </div>

    <div class="ui container">
      <div class="ui basic clearing segment">
        <p>You've done ? click to save</p>
        <button class="ui right floated primary button"> Save</button>
      </div>
    </div>