Jellyfin自定义CSS：创建占150%页面宽度的元素宽度网格

无关但必要细节 #

• 基于开源软件Jellyfin，无需自行搭建
• 仅接受纯CSS方案，不考虑非CSS类替代方案

实际需求 #

实现一个满足以下条件的网格布局：

• 每列宽度等于元素自身的实际宽度
• 网格整体宽度至少为屏幕/文档宽度的150%，页面必须向右溢出

关键限制 #

• 无法访问JS或HTML代码
• 元素尺寸由系统自动生成，所有元素尺寸一致但无法直接获取该值
• 必须保证页面存在横向溢出效果

已尝试的无效方案 #

• flex布局：一维布局不符合网格的多行列需求
• Grid布局：测试过auto、minmax、calc、min-content、max-content等属性组合，均未达到预期效果
• calc计算：理论上可行，但无法与min-content/max-content属性配合使用

补充容器信息 #

• 父容器：emby-scroller
• 目标容器：emby-itemContainer
• 之前尝试设置grid-template-columns: repeat(auto-fill,auto);或repeat(auto-fill,min-width);时仅生成单列，推测是min-width:150%的设置导致冲突

当前接近方案的问题 #

.homePage .emby-scroller {
    margin-right: 0;
  }
.homePage .itemsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill,20em);
    grid-auto-rows: auto;
    min-width:150%;
  }

存在两个核心问题：

1. 无元素时容器仍保持150%宽度，产生不必要的空白
2. 强制所有列宽为20em，忽略了元素自身的实际尺寸

最终解决方案 #

.homePage .emby-scroller {
    margin-right: 0;
    overflow-x: visible; /* 确保父容器不截断溢出的网格内容 */
}
.homePage .itemsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, max-content); /* 列宽自动适配元素自身宽度 */
    grid-auto-rows: auto;
    width: max(150vw, fit-content); /* 取150%视口宽度与元素总宽度的较大值，保证溢出效果 */
}

方案说明 #

1. grid-template-columns: repeat(auto-fill, max-content)：让每一列的宽度自动匹配元素内容的最大宽度（即元素自身实际宽度），同时自动填充尽可能多的列数
2. width: max(150vw, fit-content)：
   • 当元素总宽度小于150%视口宽度时，网格宽度设为150vw，确保页面向右溢出
   • 当元素总宽度超过150vw时，网格宽度取元素总宽度，同样会触发横向溢出
   • 无元素时，fit-content为0，网格宽度自动收缩为0，避免空白
3. emby-scroller设置overflow-x: visible：解除父容器可能存在的横向截断限制，保证网格溢出部分能正常显示在页面外

内容的提问来源于stack exchange，提问作者JIFSHED