几个我反复用到的 CSS 布局技巧

一行搞定响应式网格

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

不用写任何媒体查询，容器宽了自动多排一列，窄了自动折行。auto-fill 和 auto-fit 的区别在于列数不足时前者留空轨道，后者把空轨道塌陷掉——大多数时候你想要的是 auto-fit。

文章右侧的目录想跟随滚动：

.toc {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

注意 sticky 失效最常见的原因是父元素设置了 overflow: hidden，排查时先往上找。

单行用 text-overflow: ellipsis，多行用：

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Tailwind 里直接 line-clamp-2。

第一篇文章，聊聊这套博客系统的技术选型：Next.js App Router、Prisma、Auth.js 和 shadcn/ui。

2026-08-091 分钟1953

用了半年 RSC，记录一些踩过的坑：什么时候该加 use client，数据该在哪一层取，以及序列化边界的注意事项。

2026-08-051 分钟702