html - 构建一个简单的响应式网格

Question

我对语义用户界面还很陌生。这可能是一个非常愚蠢的问题。

我正在努力创建响应式/移动友好的五列网格布局。这是一张显示我正在尝试做的事情的快速图像。另外，抱歉我的 MS Paint 技能有问题:

计算机:

手机:

有什么想法吗？ :)

Answer 1

我认为外容器很简单。对于其中包含 5 个元素的 Segment，您可以使用如下内容:

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet" />

<div class="ui container">

  <div class="ui one column centered grid">

    <div class="center aligned column" style="background-color: #B0C4DE;">
      Some Row
    </div>

    <div class="column">
      <div class="ui stackable five column grid">
        <div class="column" style="background-color: #FFF8DC;">Item 1</div>
        <div class="column" style="background-color: #F8F8FF;">Item 2</div>
        <div class="column" style="background-color: #FFF8DC;">Item 3</div>
        <div class="column" style="background-color: #F8F8FF;">Item 4</div>
        <div class="column" style="background-color: #FFF8DC;">Item 5</div>
      </div>
    </div>

    <div class="column" style="background-color: #E0FFFF;">
      New Row
    </div>

  </div>

</div>

网格是你的 friend https://semantic-ui.com/collections/grid.html