这种流畅的网格布局哪里出了问题？

Question

这是我第一次来这里。一位朋友建议这是一个很好的知识来源，我非常需要它！

我正在尝试编写 HTML 和 CSS，使用视口、媒体查询和流畅的网格来创建从桌面缩放的页面 (desktop example ) to mobile (mobile example)。

我试图在 w3c 站点的帮助下将它拼凑在一起，但不是特别有帮助的人说我在那里有 bootstrap（我不打算使用它，但想要它取出来但我不知道它是什么）。

我设法实现的是让移动尺寸正常工作，但由于某种原因，应该占桌面行宽 50% 和 25% 的框的颜色区域不会拉伸他们应该这样做。

我做错了什么？非常感谢帮助！

这是我写的html：

And this is the CSS: @charset "utf-8";

/* CSS Document */

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 8px;
  border: thin rgba(0, 0, 0, 1.00);
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}

html {
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

.navspot {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  height: auto;
  vertical-align: middle;
  background: #d9cf91;
  text-align: right;
}

.maincontent {
  /*properties for cell*/
  /*Nothing is required here
    because we can use default styles*/
  background: #30332c;
  color: #FFFFFF;
  padding: 10px;
}

.box1 {
  background-color: #dfcf91;
  color: #FFFFFF;
  padding: 10px;
  text-align: left;
  float: left;
}

.box2 {
  background-color: rgba(107, 35, 36, 1.00);
  color: #FFFFFF;
  text-align: center;
  padding: 10px;
  float: left;
}

.box3 {
  background-color: #8D9981;
  text-align: center;
  padding: 10px;
  float: left;
}

.box4 {
  background-color: #606956;
  text-align: center;
  padding: 10px;
  float: left;
}

.box5 {
  background-color: #8D9981;
  text-align: center;
  padding: 10px;
  float: left;
}

.box6 {
  background-color: #606956;
  text-align: center;
  padding: 10px;
  float: left;
}

.footer {
  /*properties for cell*/
  /*Nothing is required here because we can use default styles*/
  /*background: #d9cf91;*/
  padding: 10px;
}


/*for phone*/

@media only screen and (max-width: 768px) {
  [class*="col-"] {
    width: 100%;
  }
}

<div class="row">
  <div class="col">
    <div class="navspot">Navigation Spot
    </div>
  </div>
</div>

<div class="row">
  <div class="col">
    <div class="maincontent">Main Content Spot
    </div>
  </div>
</div>

<div class="row">
  <div class="col-6">
    <div class="box1">Box 1
    </div>
  </div>
  <div class="col-6">
    <div class="box2">Box 2
    </div>
  </div>
</div>

<div class="row">
  <div class="col-3">
    <div class="box3">Box 3
    </div>
  </div>

  <div class="col-3">
    <div class="box4">Box 4
    </div>
  </div>

  <div class="col-3">
    <div class="box5">Box 5
    </div>
  </div>

  <div class="col-3">
    <div class="box6">Box 6
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="footer">Footer Area
      </div>
    </div>
  </div>

对不起，如果我是个笨蛋。真的在 CSS 和流动性的概念上苦苦挣扎。提前致谢！

Answer 1

修复 1：彩色内容框不拉伸

按照 ovokuro 所说的那样，从你的“.box”的 ALL 中删除 float:left; 行类.

修复 2：列行为和网格中的换行

网格中的某些 div 元素没有像您预期的那样继承 border-box 模型。要为所有浏览器修复此问题，请添加：

 html {
     box-sizing: border-box;
  }
 *, *:before, *:after {
     box-sizing: inherit;
  }

有关此内容的更多信息，请参阅 Box Sizing > Universal Box Sizing with Inheritance

修复 3：指南

在您学习的同时，在您的网格中添加一些指南，这样您就可以更轻松地了解您在做什么以及它们之间的关系。例如：

/* temporary orange column guides */

  [class*="col-"] {
     border: 1px dotted orange;
  }

这种流畅的网格布局哪里出了问题？

Where did I go wrong with this fluid grid layout?

html

css

fluid-layout