制作响应式 CSS 全屏 100% 宽度，两行三列网格（图像背景和文本叠加）答案

【问题标题】：make a responsive css fullscreen 100% width, two rows three column grid (images background and text overlay)制作响应式 CSS 全屏 100% 宽度，两行三列网格（图像背景和文本叠加）
【发布时间】：2016-12-12 14:58:35
【问题描述】：

大家好。

我在这里多次找到帮助，非常感谢这个平台！谢谢大家！

这是我在这里的第一个问题，我可能要求的有点太多了。

我正在尝试构建一个小型“webapp”，它显示当前时间、日出/日落、天气等，以使用 javascript/API 训练自己...

我想构建一个全宽网格(please see screenshot here)。因此，无论桌面大小如何，它始终是全屏的。（如果可能，在平板电脑上只有两列）和智能手机 1colum fullwidth 也是如此。在网格中的每一个 6div 上，我都希望获得不同的背景图像和居中的覆盖文本以用于数据显示。但这我可以建造。

我尝试使用 bootstrap，但没有得到我想要的，所以如果这可以使用常规 css 制作，那就太棒了。没有任何边距、填充、空间。

任何人都可以在这里帮助我吗？提前非常感谢您！

【问题讨论】：

标签： html css grid responsive

【解决方案1】：

请查看此链接https://jsfiddle.net/gxjowd7y/3/

body, html{
  height:100%;
}

.box-a{
  background:green;
  height:50%;
}

.box-b{
  background:purple;
   height:50%;
}

.box-c{
  background:orange;
   height:50%;
}

.box-d{
  background:red;
  height:50%;
}

.box-e{
  background:gray;
   height:50%;
}

.box-f{
  background:blue;
   height:50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="col-md-4 col-sm-6 col-xs-12 box-a">

</div>

<div class="col-md-4 col-sm-6 col-xs-12 box-b">

</div>

<div class="col-md-4 col-sm-6 col-xs-12 box-c">

</div>

<div class="col-md-4 col-sm-6 col-xs-12 box-d">

</div>
<div class="col-md-4 col-sm-6 col-xs-12 box-e">

</div>
<div class="col-md-4 col-sm-6 col-xs-12 box-f">

</div>

【讨论】：

哇！这太棒了，而且看起来很简单。我现在感觉有点傻。非常非常感谢你，伙计！太棒了！