Html RWD网格视图中的列（CSS响应）

我正在学习CSS，并在年中接触到了这一点。我很难理解在grid view中有这么多列类的目的是什么：

....
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
......

为什么这两个div元素被放在colulmn-3和colulmn-9中，为什么其他元素被跳过

  <div class="col-3">
  <ul>
......
  </ul>
</div>

<div class="col-9">
.....

所以

如果你想有一个完整的宽度，你需要有12个，这将给你100%的容器

如果希望有3列，则将使用4+4+4=12

<div class="row">
   <div class="col-4">
   <div class="col-4">
   <div class="col-4">
</div>

---

这是一个简单的数学，而采取列类div

百分比加起来等于100%。比如25%+75%=100%

例子

2列：左侧25%，右侧75%

2列：左侧50%，右侧50%

3列：每列33%

---

我试着解释一下。有关更多信息，请访问Webseite

网格视图在99%的情况下用于制作网站

行的默认值为12列。这意味着div应该只使用3列12。另一个应该使用9列，共12列 所以你有3+9=12列。

---

我希望它能有所帮助。

可能是pintxo的复制品，请不要这样说。它不是复制品。你看过我的问题细节了吗？这样的专栏类通常是CSS网格系统的一部分，所以我认为让你了解网格系统是什么是一个好主意。这正是我想学习和了解的。谢谢你的回答。谢谢，你解释得很好，虽然我只能接受一个答案，所以我接受了MKAD。欢迎。没有问题：

<div class="row">
   <div class="col-4">
   <div class="col-4">
   <div class="col-4">
</div>

<div class="row">
    <div class="col-3">..</div>
    <div class="col-9">..</div>
</div>

<div class="row">
    <div class="col-6">..</div>
    <div class="col-6">..</div>
</div>

<div class="row">
    <div class="col-4">..</div>
    <div class="col-4">..</div>
    <div class="col-4">..</div>
</div>