如何使用CSS框架Skeleton实现超简易的轻量级网格布局？

本文共计778个文字，预计阅读时间需要4分钟。

由于默认没有加 `` 标签，我将按照您的要求，简单改写并输出以下内容：

• 它只在 @media only screen and (min-width: 550px) 才给 .container 设 max-width: 960px，小于这个宽度时宽度是 100% 但无居中约束
• 如果你页面没手动加 * { box-sizing: border-box }，内边距或边框会让栅格列实际溢出
• 解决办法很简单：在引入 Skeleton CSS 后追加两行

*, *::before, *::after { box-sizing: border-box; } .container { margin: 0 auto; }

row 和 columns 类名必须成对出现吗？

不是必须，但单独用 .row 或单独用 .six.columns 会立刻破坏布局——前者缺少清除浮动，后者缺少父容器的负外边距修正。

• .row 内部用了 margin-left: -0.9375rem; margin-right: -0.9375rem，这是为了抵消子列的 padding-left/right: 0.9375rem
• 如果跳过 .row 直接写 <div class="six columns">，左右 padding 就没地方“扣掉”，视觉上会缩进
• 典型错误现象：列之间留白变大、最后一列换行、文字贴左顶边

如何让 Skeleton 栅格在 Flexbox 环境下不打架？

直接混用会冲突。Skeleton 的 .row 用 float: left 实现，而现代 CSS 习惯用 display: flex 布局，两者共存时 float 会被忽略，列会垂直堆叠。

• 别在同一个容器上同时加 .row 和 display: flex
• 如果要用 Flex，就彻底弃用 .row + .columns，改用 Skeleton 提供的 .one.column ~ .twelve.columns 仅作宽度控制（它们本质是 width: 8.333% 这类声明）
• 此时需自行补 display: flex 和 flex-wrap，否则超宽列不会折行

为什么 offset-by-two 在小屏下失效？

因为 Skeleton 的 offset 类（如 .offset-by-two）没有响应式版本，它只在桌面断点生效，且基于固定列数计算偏移量，不随视口缩放重算。

立即学习“前端免费学习笔记（深入）”；

• 它的实现是 margin-left: 16.666%（对应两列），但这个值写死在非媒体查询块里
• 小屏下列宽变了，但 offset 还按 12 列网格算，导致偏移量过大甚至整行错位
• 真要响应式偏移，得自己写媒体查询覆盖，比如：

  @media only screen and (max-width: 549px) { .offset-by-two { margin-left: 0; } }

越轻量的框架，越依赖你理解它省掉了什么。Skeleton 没封装响应式 offset、没处理 box-sizing、没做 flex 兼容——这些不是 bug，是取舍。用之前先看它那不到 400 行的源码，比查文档快。