Milligram 是一个约 2KB 的极简 CSS 框架，支持响应式布局，适用于快速搭建轻量级页面；通过 CDN 引入即可使用，提供 container、row、column 等布局类及按钮、表单、表格默认样式，建议结合自定义 CSS 扩展，并注意 viewport 设置以优化体验。
Milligram 是一个极简的 CSS 框架，适合快速搭建轻量级、美观的页面。它文件小（仅约 2KB），无 JavaScript，提供干净的默认样式和响应式布局支持，非常适合做原型、小型项目或追求性能的站点。
引入 Milligram
使用 Milligram 非常简单，可以通过 CDN 快速引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
将这行代码放入 HTML 文件的 <head> 中即可开始使用。你也可以通过 npm 安装：
npm install milligram
基本页面结构示例
下面是一个使用 Milligram 快速搭建的简单页面：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Milligram 示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
</head>
<body>
<div class="container">
<h1>欢迎使用 Milligram</h1>
<p>这是一个简洁、响应式的页面布局。</p>
<pre class='brush:php;toolbar:false;'><form>
<label for="email">邮箱</label>
<input type="email" id="email" placeholder="your@email.com">
<label for="message">留言</label>
<textarea id="message" placeholder="输入内容..."></textarea>
<button type="submit" class="button-primary">提交</button>
</form>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</tbody>
</table></div> </body> </html>
常用类与布局技巧
Milligram 提供了一些实用的类来控制布局和样式：
<div class="row"> <div class="column">左侧内容</div> <div class="column">右侧内容</div> </div>
- .button 和 .button-primary：按钮样式，主操作推荐用 button-primary
- 文本对齐：支持 .text-left、.text-center、.text-right
- 间距控制：Milligram 默认间距合理，如需调整可自定义 margin 或 padding
自定义与扩展
Milligram 样式极简，实际项目中可能需要补充一些自定义样式。建议创建一个额外的 CSS 文件进行覆盖：
/* custom.css */
.container {
max-width: 960px;
}
<p>.highlight {
background-color: #f0f8ff;
padding: 1rem;
border-radius: 4px;
}</p>然后在页面中引入：
<link rel="stylesheet" href="custom.css">
这样既能保留 Milligram 的简洁，又能灵活扩展。
基本上就这些。Milligram 适合想快速出效果又不想引入大框架的场景，搭配原生 HTML 和少量 CSS 就能做出清爽的页面。不复杂但容易忽略细节，比如 viewport 设置和语义化标签的使用，注意这些体验会更好。
