Html 创建基于网格的响应网页

我想在顶部显示静态朴素栏，并将整个页面放入6列的网格中，增加行数

css:

以下是html：

<div class=container_6>
   <div class=grid_5>
   </div>    
 </div>

JSFIDDLE：

为什么显示页面仍然看起来是空的

我遵循这一文件：

为什么显示页面仍然看起来是空的

因为你的容器的高度是0px。您必须为容器的网格设置一些

高度

我已经为您创建了6列网格容器-

HTML:

<div class=container_6>
   <div class=grid_1></div>   
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>  
</div>

/* ---------- Containers ---------- */

.container_6 {
    margin-left: auto;
    margin-right: auto;
    width: 1122px;
}
.grid_1 {
    background-color: #FF0000;
    height: 300px;
}

[已编辑]
根据您的评论：

<div class=container_6>
   <div class=grid_1></div>   
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>
   <div class=grid_1></div>  
</div>

/* ---------- Containers ---------- */

.container_6 {
    margin-left: auto;
    margin-right: auto;
    width: 1122px;
}
.grid_1 {
    background-color: #FF0000;
    height: 300px;
}

我希望整个屏幕分为6列和5行网格。信息技术
应能对任何设备作出响应。这可能吗？——@用户2129623

试试-
我已经设置了
填充：5px0px和<代码>高度：20%
到
.container\u 6
将整个屏幕划分为6列5行的网格，您可以根据需要调整填充。
可能是因为其中没有内容？！颜色会影响文本的颜色！放置背景色，因为容器的高度为0px…我已将20px高度设置为container try-@user2129623 try 6 Grids container-我希望整个屏幕被划分为6列5行的网格。它应该对任何设备都有响应。可能吗？非常感谢。真令人讨厌。但正如我所看到的，它是横向负责的，但当我们垂直跟踪窗口时，它的行为并不负责。@user2129623它始终是屏幕的100%高度，分为6列和5行的网格。。。尝试垂直地重新调整窗口大小。是的，从上到下是负责任的，但当我们从左到右调整窗口大小时，网格大小不会改变。这是因为在你的小提琴中有固定宽度1122px，并且没有css@media查询。。。请检查你的小提琴。。。