本文翻译自CreatingYourOwnCSSGridSystem|CSSGrid已经存在很长时间了。它们通常捆绑在Bootstrap等框架中。我不是Bootstrap的仇恨者，但如果您真正需要的只是一个网格，那么有时使用框架是“矫枉过正”。以下是如何从头开始制作您自己的CSS网格。CSSGrid的元素我们可以看到基本的网格只由几个元素组成：Container（容器）行（row）Column（列）Gutter（列之间的空间）容器（Container）容器的目的是设置整个网格宽度。容器的宽度通常为100%，但您可能希望设置一个最大宽度。.grid-container{宽度：100%；最大宽度：1200px；}列之间的空间（装订线）行元素的目的是使其中的列不会溢出到其他行。为此，我们将使用clearfixhack来确保内联的所有内容都保持内联。/*我们的cleafixhack*/.row:before,.row:after{content:"";显示：表格；clear:both;}列（Column）列是网格中最复杂的部分。首先，在CSS中有几种不同的列定位方式，然后是需要考虑的各种宽度，以及诸如响应式设计之类的东西。在本教程中，我们将定义列并为其指定宽度。ColumnPositioningfloat,inline-block,display:table,display:flex.这些都是在CSS中定位列的不同方式。这些方法中最容易出错且使用最广泛的是“float”方法。如果我们的列是空的，那么我们的浮动列将堆叠在一起。为防止出现这种情况，请将列的最小高度设置为1px并将它们浮动。[class*='col-']{浮动：左；最小高度：1px；}列宽要找到列的宽度，我们所要做的就是将列的总数除以容器的宽度。在我们的例子中，容器的宽度是100%，我们想要6列，所以100/6=16.66，所以我们的基本列宽是16.66%。[class*='col-']{浮动：左；最小高度：1px；宽度：16.66%；这当然只是一个开始。如果我们想要一个2列宽的部分，我们必须创建一个2列宽的列。计算很简单。使用这些列组合时，我们唯一要考虑的是一行中的列总数最多为6（或列总数是多少）。响应式系统中的padding问题在W3C标准盒模型下，响应式系统中宽度单位为百分比的元素设置padding比较麻烦。幸运的是，使用border-box模型，我们可以很容易地设置padding。/*更改网格内所有元素的框模型*/.grid-container*{box-sizing:border-box;}[class*='col-']{浮动：左；最小高度：1px；宽度：16.66%；/*设置内边距*/padding:12px;}使用*{box-sizing:border-box;}改变CSS中所有元素的盒模型。基础网准备好了 col-1
