惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Vercel News
Vercel News
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
雷峰网
雷峰网
有赞技术团队
有赞技术团队
罗磊的独立博客
博客园 - 叶小钗
Jina AI
Jina AI
博客园 - 司徒正美
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
人人都是产品经理
人人都是产品经理
Apple Machine Learning Research
Apple Machine Learning Research
阮一峰的网络日志
阮一峰的网络日志
Microsoft Security Blog
Microsoft Security Blog
大猫的无限游戏
大猫的无限游戏
量子位
MyScale Blog
MyScale Blog
V
Visual Studio Blog
博客园 - 聂微东
The Cloudflare Blog
Engineering at Meta
Engineering at Meta
小众软件
小众软件
宝玉的分享
宝玉的分享

空白Koobai

唠叨 - 2026-05-10 10:45 唠叨 - 2026-05-08 23:34 唠叨 - 2026-05-08 15:55 唠叨 - 2026-05-07 14:38 唠叨 - 2026-05-06 11:47 唠叨 - 2026-04-30 14:40 唠叨 - 2026-04-30 12:51 唠叨 - 2026-04-22 12:46 唠叨 - 2026-04-18 09:35 唠叨 - 2026-04-16 12:24 唠叨 - 2026-04-12 10:47 唠叨 - 2026-04-06 12:25 唠叨 - 2026-04-03 19:57 唠叨 - 2026-04-02 22:38 唠叨 - 2026-04-01 23:23 唠叨 - 2026-03-31 14:08 唠叨 - 2026-03-28 16:43 唠叨 - 2026-03-28 09:39 唠叨 - 2026-03-27 11:10 唠叨 - 2026-03-25 11:48 唠叨 - 2026-03-24 13:12 唠叨 - 2026-03-21 16:55 唠叨 - 2026-03-20 11:48 罢免小区业委会之后续 反角度之博客用户体验不能做的 N 件事 唠叨 - 2026-03-16 13:10 唠叨 - 2026-03-13 12:46 唠叨 - 2026-03-11 19:25 唠叨 - 2026-03-07 20:21 唠叨 - 2026-03-04 13:45
博客折腾随记及 CSS Grid 属性
2023-06-12 · via 空白Koobai

最近一直在不断的折腾博客,就跟唠叨里说的一样:对博客的折腾真是越折腾越来劲,一旦停下来,瞬间心里觉得空落落的。几乎把各个页面都重新梳理优化了下,特别是首页,各模块的信息流都给聚合起来了。因为更新博文的频率实在是不高,也许降低博文信息展示权重,让其首页更丰富起来,可读性更高点。

折腾过程中,ChatGPT 给出了 CSS display: grid; 属性,想起之前 风记星辰 也分享过,真是不了解不知道,一试用,发现用于并列容器的布局实在是太好用了,一直困扰我的自适应、等高等宽问题迎刃而解。索性把现有的页面全部基于 Grid 属性更改掉。其中 grid-gap 也很牛逼,不像以前用 margin-right 导致最右边的容器也会空出一定的距离。

display: grid;
grid-gap: 10px; /* 中间空10px间距 */
/* grid-template-columns 各个使用方法 */
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));/* 根据浏览器窗口自适应布局,最小容器宽度340 */
grid-template-columns: auto 1fr; /* 第一列宽度根据元素宽度自适应,第二列使用剩余容器空间 */
grid-template-columns: 1fr 1fr; /* 两列等宽 */
grid-template-columns: repeat(4, 1fr); /* 多列等宽,4为平均分为四列 */

现在折腾博客是完全离不开 ChatGPT 了,数据分离、交互动画、随机调用、布局样式,都通过它来实现,只要你多问几次或者完善对话语句,基本上都能给到你想要的答案。真是做到每个页面的最终呈现,都有它的贡献。自己一个完全看不懂 JS 的人,页面居然也用了不少 JS 效果。

当然有时候问着问着也烦,不想再问,始终给不到自己想要的效果。这个时候要么作罢,要么隔段时间新建窗口重新问,也许想要的答案就来了。目前使用的是免费 3.5 版本,如果 4.0 版本,估计更简单易用,特别是能访问互联网之后,期待未来~

有时候在想,这样折腾博客的意义是什么,日志没写多少,每天净搞些有的没的,内容才是重要的才对,再说折腾来折腾去,也没几个人看,图啥?嗯。。。。,开心最重要。意义就在于不停的折腾,就跟开头说的一样:一旦停下来,瞬间心里觉得空落落的。

感谢折腾过程中, 林木木风记星辰 老师帮忙。同时折腾过程中,又认识了一些新朋友 小饿linlinxing小熊wananaiko老麦大大的小蜗牛忆往事归臧叶子笔记少岱山 等等,博客真好。