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

Question

我对语义还很陌生-ui。这可能是一个非常愚蠢的问题。

我正在努力创建一个 responsive/mobile 友好的五列网格布局。这是一张 quick 图像，显示了我正在尝试做的事情。另外，对不起我生病的 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>

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

Answer 2

我有一个 "index.html" 和一个 "style.css" 来完成这个。 html 看起来像这样（称之为 "index.html"）：

<!DOCTYPE html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta charset="utf-8">
        <meta name="description" content="grid example for Whosebug">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>  Grid Example - by Rob Blansett.
        </title>
    </head>
    <body>
        <div class="Container">
             <p>Container: Content should be horizontally centered.</p>
             <div class="Row" id="One">
                Row #1
             </div>
             <div class="Row" id="Two">
                Row #2
                 <div class="Segment">
                    <div class="SegmentText">
                        Segment
                    </div>
                    <div class="Item" id="Item1">
                         Item #1
                    </div>
                    <div class="Item" id="Item2">
                         Item #2
                    </div>
                    <div class="Item" id="Item3">
                         Item #3
                    </div>
                    <div class="Item" id="Item4">
                         Item #4
                    </div>
                    <div class="Item" id="Item5">
                         Item #5
                    </div>
                 </div>

             </div>
             <div class="Row" id="etc">
                Row ...
             </div>
        </div>
    </body>
</html>

"style.css" 看起来像这样：

* {
    padding: 0;
    margin: 0;
}

div {
    display: block;
    padding: 1em; 
    margin: 1em;
    border-style: solid;
    position: relative;
}

div.Container {
    margin-left: 2%;
    margin-right: 2%
}

div.Row {
    background-color: grey;
}

div.Segment {
    background-color: lightgrey;
}

div.SegmentText {
    border-style: none;
} 

div.Item {
    background-color: darkgray;
}

/* If at least 500 pixels width is available then: */
@media (min-width:500px) {
    div {
        display: grid;
        grid-gap: 1em;
        padding: 1em; 
        margin: 0;
        border-style: solid;
        position: relative;
    }

    div.Container {
        margin-left: 10%;
        margin-right: 10%
    }

    div.Segment {
        display: grid;
        grid-template-columns: 1Fr 1Fr 1Fr;
    }

    div.SegmentText {
        grid-column: 1 / 4;
        border-style: none;
    } 
}

/* If at least 800 pixels width is available then: */
@media (min-width:800px) {
    div {
        display: grid;
        grid-gap: 1em;
        padding: 1em; 
        margin: 0;
        border-style: solid;
        position: relative;
    }

    div.Container {
        margin-left: 20%;
        margin-right: 20%
    }

    div.Segment {
        display: grid;
        grid-template-columns: 1Fr 1Fr 1Fr 1Fr 1Fr;
    }

    div.SegmentText {
        grid-column: 1 / 6; 
        border-style: none;
    } 
}

请注意，我已经包含了 window 宽度的@media 查询。默认样式设置在 CSS 的顶部，如果有足够宽的 window，则在其下方是执行 GRID 内容的查询部分。因此，如果可用像素少于 500，它将是一列，如果可用像素至少为 800，它将是 5 列。我包括一个具有 3 列的中等大小 - 只是为了好玩。重新调整大小 window 并查看实际样式之间的调整。

这里是link制作副本： http://technifusion.com/projects/web/grid-example-01.html

这只是给出了如何完成的想法。

注意：此解决方案不使用语义-ui（原始发帖者要求的），但此解决方案可能仍会帮助不使用该框架的人。

Answer 3

我知道你想使用 semantic-ui 但如果你不介意，你也可以使用 bootstrap4 创建布局。

Bootstrap4 方法首先是移动设备，因此创建您的 html 结构以适应移动设备，然后从那里发展。

Bootstrap 使用基于 12 列行的网格系统。您使用移动设备的 class col-x 为每一列定义 space，col-md-x中等宽度 window，col-lg-x 大。 "x" 定义 div 元素占用的列数 (x<=12)。检查 Bootstrap4 documentation.

记得将相关的 js 库和 css 添加到您的 html 文件中。

检查这个片段：

#row-1{
  background-color: orange;
}
#row-2{
  background-color: yellow;
}
#row-3{
  background-color: lightblue;
}

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>

<div class="container">
  <div id="row-1" class="row">
    <div class="col-12">
      Row #1
    </div>
  </div>
  <div id="row-2" class="row">
    <div class="col-12 col-md-2">
      Item 1
    </div>
    <div class="col-12 col-md-2">
      Item 2
    </div>
    <div class="col-12 col-md-2">
      Item 3
    </div>
    <div class="col-12 col-md-2">
      Item 4
    </div>
    <div class="col-12 col-md-2">
      Item 5
    </div>
    <div class="col-12 col-md-2">
      Item 6
    </div>
  </div>
  <div id="row-3" class="row">
    <div class="col-12">
      Row #3
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Answer 4

我想你忘记了关于语义的最好的部分之一 UI。

https://semantic-ui.com/views/item.html

Responsive Element Item views are designed to be responsive with images stacking at mobile resolutions.

您只需将您的项目元素放在 ui 项目上，就可以了。看这里：

<div class="ui items">
     <div class="item">
     <div class="item">
     <div class="item">
     <div class="item">
     <div class="item">
</div>

使用网格很酷，但您已经有了响应式元素:)

和平

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

Building a simple responsive grid

html

css

grid

semantic-ui