网页设计24栅格 第1篇
网格是构成页面栅格系统的最小单位。PC端我们一般用8作为网格的最小单位。
手把手教你做规范--布局规范（栅格）
为什么用8？
尽量保持单位是偶数，这样在页面放大或者放大或者缩小时还能保持清晰。在保证偶数的前提下，使用“ 2、4、6、8、10、12... ”作为最小单位都是可以的。
通常情况下PC端横向是固定的，纵向是可以滚动的。根据2019年中国PC端分辨率端统计，“4、8”只有不能被1366整除，其他都可以。由于4过于小，普通用户从视觉上不容易分辨差别，所以我们选用8作为最小单位。之后所有的数值都使用8的倍数。
网页设计24栅格 第2篇
后台系统和网页不同，往往逻辑复杂、数据量大，同时需要获取、比对很多的信息。
信息以表格、表单居多，所以屏幕的宽度就显得很重要了，寸土寸金。所以通常选中全部填充的样式，舍弃两侧留白的样式。
我们选择设备比例最多1920x1080为画板。（这里主要将纵向栅格，暂不考虑浏览器自身的标签栏和菜单栏的高度）
制定如下的样式，数值仅供参考，照搬的请慎重。
手把手教你做规范--布局规范（栅格）
网页设计24栅格 第3篇
在探索全屏显示的网格布局时，张晓发现了一个巧妙的方法来实现这一目标：通过将容器的最大宽度设置为100%而非具体的像素值，可以轻松地让网格自适应屏幕尺寸。这意味着无论用户的设备多宽，网格都将填满整个可用空间。为了保持布局的一致性，张晓建议在.grid类中使用display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));这样的设置。这里的minmax函数指定了每列的最小宽度为50像素，而最大宽度则根据剩余空间动态调整。这样一来，即使是在小屏幕上，列也不会变得过于狭窄，而在更大的显示器上，则能充分利用额外的空间，使得布局更加宽敞舒适。
此外，张晓还提到，在全屏模式下，适当调整column-gap和row-gap的值同样重要。考虑到全屏布局往往涉及更大的屏幕尺寸，因此将列间距和行间距分别设置为25像素和15像素可能会带来更好的视觉效果。这样做不仅增加了元素之间的透气性，同时也避免了内容过于拥挤的问题，提升了整体的可读性和美观度。
面对多样化的屏幕尺寸，张晓深知单一的布局策略难以满足所有用户的需求。为此，她提出了一套兼容性强的设计方案。首先，通过媒体查询(@media)针对不同断点定义特定的样式规则。例如，当屏幕宽度大于等于1200像素时，采用固定宽度的1200像素布局；而对于小于1200像素的情况，则切换到全屏模式，利用百分比单位来定义网格的宽度。更重要的是，张晓强调了在设计过程中应考虑到内容的流动性。这意味着在较小的屏幕上，原本并排显示的24列可能需要重新排列成较少的列数，比如12列或更少，以确保信息依然清晰易读。通过这种方式，不仅能够适应各种设备，还能保证用户体验的一致性。
为了让网站能够在全屏显示与固定宽度布局之间平滑过渡，张晓推荐使用CSS媒体查询结合JavaScript来实现智能切换。具体来说，可以通过监听窗口大小变化事件(),动态调整CSS变量，进而改变.container元素的max-width属性值。当检测到屏幕宽度超过一定阈值（如1200像素）时，将.container的最大宽度设置为1200像素；反之，则将其设置为100%，触发全屏模式。这种方法的好处在于它能够根据用户的实际浏览环境自动调整布局形式，无需手动干预。同时，通过合理运用CSS变量，还可以简化代码量，提高维护效率。最终，无论是桌面用户还是移动设备使用者，都能享受到既美观又实用的网页体验。
网页设计24栅格 第4篇
为了实现一个1200像素宽的24列CSS网格布局，首先需要创建一个作为整个布局基础的容器。在这个例子中，张晓建议使用类名为.container的div元素来充当该角色，并为其设置max-width: 1200px;以确保不论屏幕尺寸如何变化，内容区域都不会超出预定的最大宽度。同时，通过margin: 0 auto;让容器水平居中，这样即使在大屏幕上也能保持布局的整洁与美观。接下来，便是构造网格本身。通过添加一个具有.grid类名的父级元素，并设置其display属性为grid，开启了CSS网格布局模式。紧接着的关键一步是定义网格模板列(grid-template-columns)，这里采用repeat(24, 1fr)的形式，意味着创建了24个等分的列，每列占据总宽度的1/24。如此一来，当容器宽度固定为1200像素时，每列的实际宽度约为50像素，这为后续的内容排版提供了坚实的基础。
在确定了基本的网格结构后，下一步则是精细化调整每列的宽度以及它们之间的间距。虽然默认情况下，CSS网格布局会自动分配空间给各个项目，但对于追求完美的张晓来说，微调这些参数至关重要。她推荐在.grid类的基础上增加一些额外的样式规则，比如通过column-gap属性来控制列与列之间的距离，默认值可以设为20像素，这样既能保证足够的呼吸感，又不会浪费太多空间。至于行间距(row-gap)，则可以根据实际内容的高度灵活调整，一般保持在10到20像素之间即可。此外，为了使布局看起来更加统一和谐，还可以考虑为所有网格项设置统一的内边距(padding)，比如上下左右各5像素，这样即便是在不同的设备上查看，也能获得一致的视觉体验。
考虑到现代互联网用户访问习惯的多样性，仅依靠固定宽度的布局显然不足以应对各种屏幕尺寸的变化。因此，张晓强调了响应式设计的重要性。通过媒体查询(@media)，可以轻松实现根据不同视口大小调整布局的目的。例如，当屏幕宽度小于768像素时，可以将网格列数减少至12列，甚至更少，以此来优化移动设备上的浏览体验。具体实现时，可以在媒体查询内部重新定义.grid类的grid-template-columns属性，使其适应新的环境。同时，也别忘了调整相应的间距和内边距，确保在任何情况下都能呈现出最佳的状态。通过这种方式，不仅增强了网站的可用性，也为用户带来了更加流畅自然的交互感受。
网页设计24栅格 第5篇
（1）大/小屏幕响应
当屏幕变大时，左侧蓝色菜单栏保持宽度不变（固定栅格）。右侧栅格区域的槽保持不变，栏等比例扩大。（流动栅格）
当屏幕变小时，左侧蓝色菜单栏保持宽度不变（固定栅格）。右侧栅格区域的槽保持不变，栏等比例缩小。（流动栅格）
手把手教你做规范--布局规范（栅格）
（2）平板响应
当屏幕小到平板的尺寸时候，栅格区的内容就无法正常显示了，十分影响体验。于是就是改变栅格的数量，变成6列栅格，同时菜单栏收缩简要模式，这样就完成了平板端的适配。
手把手教你做规范--布局规范（栅格）
（3）手机响应
手把手教你做规范--布局规范（栅格）
网页设计24栅格 第6篇
CSS网格布局是一种现代的网页布局技术，它允许开发者使用行和列来创建二维网格结构，从而更加容易地控制元素的位置与大小。这种布局方式不仅简化了复杂页面的设计流程，还提供了强大的灵活性，使得响应式设计变得更加直观和高效。相较于传统的布局方法，如浮动或定位，CSS网格能够更好地处理未知的或动态的内容，确保无论内容多少，页面都能保持良好的视觉效果。此外，它支持自动放置功能，即可以自动将项目放入网格区域，这为设计师们提供了极大的便利性，让他们能够专注于内容本身而非繁琐的布局调整。
24列网格布局是基于栅格系统的扩展，它将整个页面划分为24个等宽的列，这样的设计可以为不同类型的元素提供更加精细的对齐和排列选项。每个列的宽度由总宽度除以24得出，加上适当的间距设置，可以轻松实现元素间的均匀分布。对于1200像素宽的容器而言，每列的宽度大约为50像素左右（具体数值取决于边距和间隔的设定）。这种布局方式非常适合那些需要高度定制化和细节控制的网站设计项目，比如杂志风格的网站或是需要展示大量图片和文本组合的页面。
首先，定义一个最大宽度为1200像素的容器，通常可以通过设置.container { max-width: 1200px; margin: 0 auto; }来实现。接着，利用CSS网格属性来创建24列的布局框架，例如设置.grid { display: grid; grid-template-columns: repeat(24, 1fr); }。最后，根据实际需求调整各列之间的间距以及单个元素的跨列情况，确保整体布局既美观又实用。通过这种方式，即使是初学者也能快速上手，搭建出既符合设计规范又具有良好用户体验的网页布局。
网页设计24栅格 第7篇
在构建CSS网格布局的过程中，优化渲染性能是至关重要的一步。随着网格中元素数量的增加，浏览器需要处理更多的计算任务，这可能导致页面加载速度变慢，尤其是在低性能设备上。为了确保用户能够快速且顺畅地浏览网页，张晓建议采取一系列措施来提升网格的渲染效率。首先，合理利用硬件加速可以显著提高性能。通过为.grid类添加transform: translateZ(0);或will-change: transform;属性，可以让浏览器优先使用GPU进行渲染，从而减轻CPU负担。其次，减少不必要的重绘和回流也是关键所在。尽量避免在JavaScript中频繁修改DOM结构或样式，因为这会导致浏览器不断重新计算布局，影响性能。相反，可以考虑使用CSS变量来动态调整样式，这样只需更改一次变量值就能更新整个网格的外观，大大减少了计算量。最后，张晓还提醒开发者注意避免过度使用复杂的CSS选择器，因为它们同样会拖慢渲染速度。通过这些技巧的应用，不仅能够提升用户体验，还能让网站在各种设备上都能保持最佳状态。
为了确保在不同设备和屏幕尺寸下都能保持一致的布局效果，张晓特别强调了几个关键点。首先，使用相对单位（如em或rem）代替绝对单位（如px），可以使元素的大小随父元素自动缩放，从而适应各种屏幕。例如，将字体大小设置为font-size: 16px;，然后将其他元素的尺寸定义为相对于字体大小的比例值，这样就能确保在不同分辨率下都能保持良好的可读性和美观度。其次，通过媒体查询来调整网格的列数和间距，确保在窄屏设备上也能呈现出清晰有序的布局。例如，当屏幕宽度小于768像素时，可以将网格列数减少至12列，甚至更少，以此来优化移动设备上的浏览体验。此外，张晓还建议为所有网格项设置统一的内边距（如padding: 5px;），这样即使是在不同的设备上查看，也能获得一致的视觉体验。通过这些方法，不仅能够增强网站的可用性，也为用户带来了更加流畅自然的交互感受。
随着项目的发展，保持网格布局的灵活性和可扩展性变得尤为重要。张晓认为，一个好的网格系统应该能够轻松适应未来可能出现的新需求，而不必对现有代码进行大规模重构。为此，她推荐采用模块化的设计思路，将网格分解为多个独立的小部件，每个部件负责特定的功能或样式。这样做的好处在于，当需要添加新功能或调整现有布局时，只需修改相应模块即可，不会影响到其他部分。此外，利用CSS预处理器（如Sass或Less）可以帮助开发者更好地组织和管理样式表，通过变量、混合宏等功能简化重复代码，提高开发效率。张晓还指出，预留足够的注释和文档对于维护工作同样重要，它能够让团队成员更容易理解代码逻辑，加快调试进度。通过这些策略，不仅能确保网格布局的长期稳定性和可维护性，还能促进团队协作，提高整体生产力。
网页设计24栅格 第8篇
（1）固定栅格
栏和槽的宽度是固定不变的，不随屏幕的大小而变化。到一定的临界值的时候栅格列数会发生变化。
假设在我们以1920的屏幕大小为画板，栅格宽度是1136，看到的如下图：
手把手教你做规范--布局规范（栅格）
在2560的屏幕下看页面，两侧的留白就会变大，中间的内容保持不变。如下图：
手把手教你做规范--布局规范（栅格）
在1024的屏幕下看页面，就会出现横向滚动条，页面仿佛被截断一样。如下图：
手把手教你做规范--布局规范（栅格）
在更小的屏幕下，栅格的列数会发生变化。但无论怎么变化，栏和槽的宽度是不变的。如下图：
手把手教你做规范--布局规范（栅格）
在临界值之间设计的布局不会改变。具体到什么临界值栅格的列数会发生变化，需要跟开发说清楚。临界值设置多少、设置多少个临界值要根据实际情况来制定。
优点：设计的还原度是最高的，无论在什么什么屏幕下，核心样式是保持不变的。
缺点：在小屏下会有滚动条。在大屏上左右留白过多，有点浪费空间。
（2）流动栅格
栏的宽度是变化的，随屏幕的大小而变化。槽的宽度固定不变。到一定的临界值的时候栅格列数会发生变化。
假设在我们以1920的屏幕大小为画板，栅格宽度是1136。看到的如下图：
手把手教你做规范--布局规范（栅格）
在2560的屏幕下看页面，槽的宽度保持不变，栏的宽度发生改变。如下图：
手把手教你做规范--布局规范（栅格）
在1024的屏幕下看页面，槽的宽度保持不变，栏的宽度发生改变。如下图：
手把手教你做规范--布局规范（栅格）
问题来了，这样一算栏的像素就不但不是偶数，而且还不是整数了，怎么办，屏幕该怎么显示呢？没关系，有的卡片可能是351个像素，有的是356个像素，这样1像素的差距在屏幕上很难看出差别来，为了在不同大小的屏幕上适配，这1像素是可以忍受的。
需要把子元素内的布局样式，那些是可以变动的地方跟前端说明即可。（例如：当连变化时，卡片内的图标保持左对齐，左边距不变。文字左对齐，每行的文字数量自适应。）
优点：在不同屏幕下会自动放大或缩小，更充分的利用空间。
缺点：由于栏宽是不固定的，样式可能会发生变形。文字可能会变成多行或者超长的一行。
（3）混合栅格
在同一页面中可以分成多个区域，每个区域做不同栅格类型。
手把手教你做规范--布局规范（栅格）
网页设计24栅格 第9篇
调整图片元素的初始尺寸时，请将默认初始比例约束为下列宽高比，尽量减少随意定义，提高产品之间的统一感：
我们对「Select 选择器」「Dropdown Menu 下拉菜单」「Ballon 气泡」「Dialog 弹窗」等 「Overlay 浮层」 类型组件的尺寸进行规范。
内边距（Padding）是用于自定义业务组件/模块时可参考的内容与容器边缘间距。
「Dialog 弹窗」类参考了栅格比例。
我们以790px为页面默认高度（MacBook pro 15-inch/Chrome浏览器/全屏显示）
高度只限定最大和最小的尺寸，具体高度请根据内容自适应。
原则上，如果内容可在最大高度之内呈现，请不要使用滚动条。
网页设计24栅格 第10篇
栏（Columns）是呈放内容区域。
PC端通常有12栅格或24栅格，意思就是纵向有12栏或24栏。
槽（Gutters）是两个栏中间的间距。槽的数量比栏的数量少一个。
假设是栅格宽度是W、栏的宽度是C、槽的宽度是G。有N个栏，就有N-1个槽，则可以推断出算出W=N*C+（N-1）G。
忘掉 栏+槽=列的概念（个人感觉没有作用，有不同见解的欢迎讨论。）
手把手教你做规范--布局规范（栅格）
为什么用12或24栏？
12栏和24栏都是PC端较常用的，移动端用4栏的居多，分的越细可变化的内容越丰富。但过于细也会使页面变得很碎，差异感和韵律感降低。12或24栏可以被2等分、3等分、4等分、6等分、12等分，还能按 1:2:1 、 1:3:2 、 1:2:2:1……等比例分割，提供了足够丰富的变化。
以下是京东首页的截图，应该是采用了12栅格，并且分别采用了2等分、四等分、六等分、2:6:2:2 、 2:10 。
手把手教你做规范--布局规范（栅格）
网页设计24栅格 第11篇
全边布局的内容区占据了 24 栏网格的宽度，并响应视窗宽度变化。适用于表格、列表等场景。
表单布局占据了 12 栏宽度，并响应视窗宽度变化。当视窗宽度小于 768（S）时，变为占据全部 12 栏。该模式由表单页面总结而来，也适用于如正文阅读等其他不需要太宽的页面场景。
卡片布局整体占据了 24 栏网格的宽度，单个卡片宽度依据每行所需数量来安排，并响应视窗宽度变化。单个卡片为动态容器。常见于数据图表、工作台等场景
非对称卡片布局整体占据了 18 栏网格的宽度，左侧卡片堆栈的宽度占据了 12 栏，右侧卡片占据了 6 栏，并响应视窗宽度变化。目前仅用于项目概览页面
适用于页面需要左/右侧栏的场景（以下使用左侧栏举例）。侧栏占据 6 栏，内容区占据 18 栏的布局。适用于表格、列表等场景。侧栏可分为悬浮侧栏、固定侧栏、动态侧栏，会有不同的布局表现，详见侧栏组件文档
由 Teambition 和 thoughts 首页总结而来，带有左侧导航的卡片布局模式。其他产品首页若由同样的结构可以参考该模式
网页设计24栅格 第12篇
1919年德国著名建筑家沃尔特·格罗佩斯（Walt Gropius）在魏玛建立国立包豪斯学院。包豪斯的平面设计基本是在荷兰“风格派”和俄国“构成主义”的影响下形成的。因此，具有高度理性化、功能化、简单化、减少主义化和几何形式化的特点。
1928年，朱斯特·施密特（Joost Schmidt）发展出了一套新的理性设计系统和方法。
20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此又被称为“国际主义平面设计风格”（International Typographic Style）。
1965年，在美国的芝加哥成立了一家新的平面设计公司——尤尼马克设计公司（Unimark），主要设计人员包括有拉尔夫·依克斯特朗姆（Ralph Eckerstrom）、詹姆斯·佛格曼（James Fogleman）、马西莫·维格涅里（Massimo Vignelli，1934-）等。尤尼马克设计公司的设计思想基本是国际主义的：强调平面设计上的标准化，采用方格网络为设计依据，目的是良好的视觉传达功能。这家公司发展很快，不久就成为一家拥有402名工作人员、在全世界设有48个设计事务所的大型国际设计公司。国际主义平面设计在这家公司的业务中得到很大的成功，而企业的规模又使得这个风格在世界各地得到进一步推广。
现在，大多数平面设计软件都有“网格”功能。
栅格简概
栅格的意义
统一产品的视觉认知，减少学习成本。提升布局规律性，页面更有秩序，信息展示更清晰，以提高用户的体验。
模块化复用，提升协作效率。从设计流程开始，统一规则，制定规范， 避免各种主观上的“感觉”造成视觉上不统一的现象，比如：模块大小、间距等。在开发阶段栅格设计系统提高了设计还原度，使网页更具备规范性，开发对组件和模块的复用，进一步提升了效率。
栅格的组成
列、水槽、边距
列Column：也被称为栏，用来盛放文本、表格、图片等内容及元素。列的宽度称为列宽，常用百分比来定义，而不是固定值（使用固定删格的时候会采用固定值，会在下篇响应式栅格中讲到），前端同学通过百分比可以灵活适应屏幕大小
水槽 Gutter：也被称为沟/间距，水槽是相邻两个列宽之间的间隔，用来分割内容，水槽的值越大，页面中留白部分的面积越多，视觉效果越松散；反之，页面越紧凑。水槽通常设为固定值
边距 Margin：网页内容和屏幕边缘之间的间隔，通常为固定值。左右大边距是计算在栅格的总宽之内的，边距值的大小决定了每个屏幕尺寸的最小呼吸空间，一般边距值≥水槽值。
此外还有最小单位、总宽度、列数三个计算因子
最小单位：栅格的基础单位，栅格内容元素和布局规则（如水槽、边距的值）都是基于它的整数倍递增的。如最小单位是8px，水槽的宽度可设为8n
列数：列的数量即栅格数量，如12栅格就有12列、24栅格就有24个列。列数n越多，那么排布在版面内的内容就越精细，通过控制列数，就可以控制版面的留白和呼吸感
总宽度：页面中自适应内容部分容器宽度，而非屏幕宽度，总宽度=列宽*列数n+水槽*（n-1）+边距*2
三、案例-搭建栅格
以下图「数据总览」页面为例，设计稿尺寸为1440*900px，左侧导航栏常驻，该页面是没有用栅格搭建的。乍一看问题似乎不大，但是资深的设计师很容易就能看出实则切割混乱，无规律。另还有一致命的点在于填充内容的容器无法换算成百分比，前端同学无法做自适应，想要适配是很困难的。
那下面将以此页面为案例教大家如何一步步搭建栅格：
Step 1: 确认容器范围
设计师在规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。栅格容器不一定是整个屏幕或界面，需要根据真实场景判断，一般只需要在内容层进行栅格化，约束内容自适应比例。
1) 单页基础布局：栅格容器=屏幕宽度
2) 存在固定控件布局：栅格容器<屏幕宽度
存在常驻的控件，如侧边导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，属于全局控制层，其占据的界面区域也不需要用来布局其他功能及内容，所以其不属于栅格区域。有赞的帮助中心同理
案例属于侧边导航布局，所以案例容器范围=屏幕宽度-侧边导航=1440-侧边导航
Step 2:确定列数、水槽值、边距
1）确定栅格列数
目前有两种比较主流的等分方式：12等分与24等分。
12等分的栅格系统：在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计；12栅格的优势在于其在相对较小的数字中最容易被整除，保证了设计师切分区块的灵活性，同时又不至于使页面过于琐碎
24等分的栅格系统：适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对12栅格系统，24栅格系统变化更加灵活，更适合内容比较多样复杂的场景。我们常见的中后台设计发布于 PC 平台，且功能复杂，内容繁多，且考虑到后期的扩展性，因此中后台常用灵活性更高的 24 栅格，比如ant design和zan design，栅格系统大小=24列+23列间距+2大边距
所以，案例中我们将采用24栅格系统
2）确立栅格的最小单位
由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位「网格」的大小。中后台中目前最普适易用的就是 8 点网格，我们可以建立 8点为一个单位的网格，使用 8 的倍数来定义模块的间距与元素的尺寸。
在适用性方面，4、6、8、10 这四个数值都是基本可以满足的，在灵活性方面，4pt表现最佳，那为什么不选4而是8呢？8 点网格有如下几点优势：
目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被 8 整除，使用 8 作为最小原子足够普适。可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种尺寸的设计
灵活性方面，4pt最佳，8pt次之。但是使用4pt页面就会被分割的非常细碎，在设计时比较难于把控，它比较适合页面内容信息较多，布局排版比较复杂的产品。而8pt栅格一般的设计场景都可以很好的满足，比较适合大多数的项目，因此是比较推荐使用的
开发工程师使用的前端开源组件库比如 Metronic、Antdesign 等也是基于 8 的原子单位来设计，因此如果设计师也使用以 8 为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质地去还原我们的设计。
3）确定水槽宽度和页边距
按照亲密性原则，我们可以按照8n定义几个常用的间距值。人眼对于距离的认知不是均匀、等分的，而是渐变的，通过对比几种经典的数列模型，选择基于斐波那契数列生成一组数组作为间距值，得到8、16、24、40系列数值，为了区分它们的使用场景我们依次为其命名为XS、SM、MD、LG、XL。
经过实践经验，在中后台系统下，水槽宽度为16px时，页边距为24px时视觉效果最佳。
水槽=16px：此时列间距在保证页面空间被高效利用的同时，也可以维持良好的呼吸感，不至于让内容过于紧凑。
页边距=24px：需要通过距离区分模块与模块之间的信息，同时也让内容区更加紧凑
Step 3:利用栅格公式计算栅格体系
栅格计算公式如下：内容区宽度=24栏+23水槽+2页边距=屏幕宽度-左侧导航宽度
基于前文屏幕宽度为1440px，采用24栅格布局，页边距取24px，水槽取16px的前提下。通过对栅格公式的计算，将具体的值带入公式：
1440-左侧导航宽度=24栏+23*16+2*24
Step 4:组织内容，分配页面比例
建立好栅格系统后，就可以根据自己的实际业务，在栅格系统上组织内容分配页面比例了。我们把页面上最终承载内容称为“盒子（Box）”,这个盒子的宽度则由栏目与水槽按比例组合得到，高度则由内容多少决定。
拓展小知识：盒子的概念
在栅格系统上容纳业务内容的容器我们把它称之为盒子（Box），栅格系统上的盒子其实跟前端工程师写页面时用到的盒子是一致的。如图所示，当我们浏览任何一个网页时，右键>检查元素（审查元素），然后在style菜单下就可以看到这个盒子结构了。
Padding就是主体内容距离盒子外侧的距离，（主体内容可以是一个按钮、一段文本、一张图片或者一个表格等）；Margin就是相邻两个盒子的距离，对应在后台栅格系统就是水槽的大小
了解完栅格系统的盒子模型之后，下一步我们需要根据具体业务内容来确定盒子的宽度。以24栅格系统为例，一个24栅格系统可以根据业务需要被2等分、3等分、4等分、6等分、8等分、12等分，还可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不对称分割。
上图中只列举了部分比例，同一个页面上控制在5组以内的比例值组合来布局比较合适，组合形式过多页面就会显得琐碎、杂乱，不利于阅读和使用。因为盒子的高度根据内容来定，故图中没有体现高度这一维度的变化规律
根据具体业务内容最终得出下图中的盒子的具体比例
最终效果如下：
到此，我们的栅格系统就搭建完成了，但是这就结束了？
网页设计24栅格 第13篇
栅格就是网格，就是这种有规律的格子。
手把手教你做规范--布局规范（栅格）
哈哈，这样一说是不是就很接地气了。英文翻译过来就是网格，至于现在为什么叫栅格就不得而知道。
手把手教你做规范--布局规范（栅格）
栅格最早是应用于平面设计中，产生于二十世纪初的西欧，完善于五十年代的瑞士，通过有规律的网格来指导版面布局。
栅格设计的在屏幕端的应用也十分广泛，不光为设计服务，对响应式开发也起到了很大的作用。虽然开发小哥说的栅格和我们理解的不太一样，但也减少了沟通成本。
网页设计24栅格 第14篇
通过本文的详细介绍，读者不仅了解了如何构建一个基于1200像素宽度的24列CSS网格布局，还掌握了如何根据不同的屏幕尺寸调整布局，以实现全屏显示的效果。张晓通过丰富的代码示例，展示了从简单的博客页面到复杂的电子商务网站产品列表页等多种应用场景下的网格布局设计方法。她强调了响应式设计的重要性，特别是在面对多样化的屏幕尺寸时，如何通过媒体查询和合理的间距设置来优化用户体验。此外，张晓还分享了关于性能优化与维护的宝贵经验，包括利用硬件加速、减少重绘和回流、使用相对单位以及模块化设计等技巧，确保网格布局不仅美观实用，而且具备良好的性能表现和可扩展性。总之，遵循这些指导原则，无论是初学者还是有经验的开发者，都能够创建出既符合设计规范又具有良好用户体验的网页布局。