Html 仅使用css的响应网格列表

我怎样才能建立一个只针对简单文本的响应网格列表呢

---

下面是一个示例：www.jsfiddle.net/kodjoe/4aj63pkk/

当您想要制作响应网格时，必须使用%作为宽度和高度。然后缩小屏幕时，宽度将与屏幕的百分比有关。因此，对于class.thumboil，您应该删除以像素为单位的最大宽度和最小宽度，或者将像素更改为百分比

.thumbnail {
    display: inline-block;
    width:80%;
    margin-right:20px;
}

创建ow css网格的步骤

grid.css

[class^='col-'] {
    float: left;
    padding: 0;
    text-align: center;
}

.col-1of4 {
    width: 25%;
}

.col-1of3 {
    width: 3.33%;
}

*, *.after, *.before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.grid:after {
    content: " ";
    display: block;
    clear: both;
}

index.html

<div class="grid">
    <div class="col-1of3">
        <p> First Row </p>
    </div>
    <div class="col-1of3">
        <p> Second Row </p>
    </div>
    <div class="col-1of3">
        <p> Third Row </p>
    </div>
</div>

第一排

第二排

第三排

col-1of3是一个宽度为33.33的列。如果你想要4列，你只需要计算屏幕大小，它等于100%除以4列。如果你把网格放在一个物体内，那么它将把物体作为100%

---

如果您想了解grid.css和index.html文件中每一行的功能说明，请看下面的视频。

您提供的示例对页面宽度做出响应，但仅以4组为单位。我想这就是你想要的

---

为此，在单个div中插入4个元素，并将div的显示设置为inline block。默认情况下，div元素设置为block，并将占据整个页面宽度，无论它有多大。

right现在更新；D、 我怎样才能只使用css并从引导中删除css部分呢？如果你想拥有一个完整的css网格而不使用引导，你必须创建一个css文件，名为grid.css，在文件中你可以放置以下内容，请参阅我编辑的答案@fatyfatoumataeh，这就是我所做的；D谢谢你的逻辑！！