Question

我正在寻找为我正在制作的网页创建网格系统，以显示一定数量的项目/项目属性。但是，由于我拥有的数据非常动态，我不会总是知道需要显示的项目数量，因此无法确切知道网格项目应该具有哪些尺寸来正确格式化页面

有人能指出我如何开始像上面那样的网格的正确方向吗？

我对HTML，php和CSS有点熟悉。我知道在线创建有大量数据，但我不认为我找到了我想要的东西。

Answer 1

所以你有一套物品，每件物品都有很多物品？据推测，每个人都有相同的属性？

这是表格数据。使用table。

<table>
    <thead>
        <tr>
            <th scope="col">Item
            <th scope="col">Colour property
            <th scope="col">Size other
    <tbody>
        <tr>
            <td>Foo
            <td>Blue
            <td>XXL
        <tr>
            <td>Bar
            <td>Red
            <td>Small
</table>

Answer 2

您可以使用支持网格的CSS框架，例如UIKit。您可以像这样使用它：

<div class="uk-grid">
    <div class="uk-width-1-3">first</div>
    <div class="uk-width-1-3">second</div>
    <div class="uk-width-1-3">third</div>
</div>

UIKit支持最多10列网格，从uk-width-1-1到uk-width-1-10

Answer 3

如果您的数据是动态的，masonry jquery对您有很大帮助。看看它的各种功能。

Answer 4

以下是HTML的外观：

<ul class="block-grid">
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ul>

这就是你如何运作：

.block-grid {
   list-style-type: unstyled;
   display: block;
   overflow: hidden;
   /* If you want 3 items in a row */
   margin-left: -2%;
}

.block-grid > li {
   /* If you want 3 items in a row */       
   margin-left: 2%; 
   width: 31.3%;
}

根据您想要的一行中的项目数更改计算。

Answer 5

也许Javascript是一种更好的方法来实现这个目标？

在网页上创建动态网格系统

5 个答案: