CSS grid 布局，有没有什么方法可以保持至少 2 列？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

PageSpeed 相关文档

› 为 NGINX 编译 PageSpeed 支持

› ngx_pagespeed

› Configuring mod_pagespeed Filters

加载性能测试工具

› WebPagetest

› Gomez

这是一个创建于 1381 天前的主题，其中的信息可能已经有所发展或是发生改变。

.parent{
    width: 90vw;
	max-width: 1280px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1em;
}

.item {
   
}

希望在宽屏时(max-width: 1280)保持 4 列
宽度缩小时自动减少列（上述两点目前都满足了）
但又希望至少能保持两列（现在会变为一列）

请问有没有什么好的解法？

附加题：渐变 border （圆角、内部镂空、宽高自适应）有没有什么好的实践方式？

现在用的伪对象填渐变，本体填一个跟外部一样的背景色。缺点是背景如果加了动画，内部伪镂空就露馅了。
还试过用 box-shadow 啥的，感觉效果不好。
直接画 svg 啥的还没试，先来问问。

max-width

Grid

渐变

镂空

21 条回复 • 2022-05-13 21:48:41 +08:00

old9

2021-01-26 21:55:49 +08:00

grid-template-columns: repeat(auto-fill, minmax(min(calc(45vw - .5em),300px), 1fr));

后面的问题 border-image 可以实现，现在浏览器支持已经比较好了

JCZ2MkKb5S8ZX9pq

2021-01-26 22:13:24 +08:00

@old9
这个加 min 我之前也考虑过，用来限制字体的上下限，没有生效。
但刚才在测试网页上写又是有效的，刚才看到说可能是 less 的问题，我明天再试试看。谢谢。

JCZ2MkKb5S8ZX9pq

2021-01-26 22:26:31 +08:00

@old9
刚好碰到高手，再请教一个问题。
刚才魔改 Behance，写一个 stylish，碰到一个问题。
https://www.behance.net/galleries/ui-ux

我希望这个页面图片铺满，隐藏其它信息。

/* 页面外框 */
ul[class*=ContentGrid]{margin:0}
/* 隐藏作者 */
div[class*=visibleStatsAndOwners],div[class*=ProjectCover-details]{display:none!important}
/* 隐藏边距 */
*[class*=Search-content],*[class*=ContentGrid]{padding:0!important;}

套了上述 css 之后大致实现需求。
但是它的每个图片块的宽度是百分比，基本还是整数位，但高度根据图片 auto，就会出现小数位。
比如 1920 的屏幕，一格就是 384*300.36 。
这个小数点高度就会导致上下两张图如果是深色的话，中间会漏一条 sub pixel 的细细的白边。
请问这个有解嘛？

父容器它是 flex row wrap，尝试 margin:-1px 无果。

mascteen

2021-01-26 22:44:06 +08:00

linear-gradient

old9

2021-01-26 22:59:05 +08:00

我看他好像是写了 flex 没用（？）而是用绝对定位+transform 硬算出来的网格布局，你可以改成 flex 或者 grid 试试。

JCZ2MkKb5S8ZX9pq

2021-01-26 23:23:44 +08:00

@old9
试了好像没效果。
如果是有 transform 的话，我看看能不能把那个先去掉，之前倒没注意。

JCZ2MkKb5S8ZX9pq

2021-01-26 23:27:51 +08:00

@old9
感谢提醒。去掉了 transform 和 absolute 的定位方式（ important 覆盖），这样改完再套 flex 是可以了。

JCZ2MkKb5S8ZX9pq

2021-01-26 23:30:02 +08:00

@old9 transform 这个小数点的属性倒是第一次注意到

ianva

2021-01-26 23:33:50 +08:00

@old9 这个 ID 让人想起当年那篇 on having layout

old9

2021-01-26 23:39:36 +08:00

@ianva 哈看来是老同志了，现在写 CSS 多幸福啊

JCZ2MkKb5S8ZX9pq

2021-01-26 23:44:03 +08:00

@old9
再请教一下，grid 布局时，好像每个格子都默认带有 overflow:hidden 属性（刚才刚好有 border 和 shadow 碰到）。
请问这个属性能够去掉嘛？
还是只能在 item 上套一层，用 margin/padding 之类的替代 gap ？

JCZ2MkKb5S8ZX9pq

2021-01-26 23:46:24 +08:00

@old9 哦，不对不对，是被别的东西 overflow 挡住了，是我搞错了。

JCZ2MkKb5S8ZX9pq

2021-01-27 10:37:36 +08:00

@old9

试了下，less 直接丢掉了部分内容。
grid-template-columns: repeat(auto-fill, minmax(min(calc(40vw - 1em), 250px), 1fr));
变成了
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

不论是插件导出 css，还是页面直接用脚本读 less 都是一样结果。

请问有什么建议嘛。是放弃 less 整体改用一个别的啥，还是再写一个 css 打个补丁上去呢。或者有什么其他建议嘛，请指教。

old9

2021-01-27 14:10:03 +08:00

一般都有 escape 功能吧，查了一下 less 是 ~'xxx' ：
http://lesscss.org/#escaping

JCZ2MkKb5S8ZX9pq

2021-01-27 18:10:20 +08:00

@old9 给大佬递茶

JCZ2MkKb5S8ZX9pq

2021-01-28 10:10:45 +08:00

@old9
试了一下 border-image，chrome 下不支持 border-radius，请问有解嘛？

JCZ2MkKb5S8ZX9pq

2021-01-28 10:13:27 +08:00

@old9
想到可以在图上直接画个圆角，但不晓得是否支持 svg，而且万一需要调整颜色大小粗细也感觉有点麻烦。不知道有没有什么更好的解法。

old9

2021-01-29 15:14:08 +08:00

可以 css 里面用 inline svg，基本可以调

old9

2021-01-29 15:35:47 +08:00

写一个你瞅瞅 https://codepen.io/old9/pen/zYoOPRr

JCZ2MkKb5S8ZX9pq

2021-01-29 15:41:50 +08:00

@old9 大佬牛逼👍🏻👍🏻👍🏻

zhaomeicheng

2022-05-13 21:48:41 +08:00

@old9 看了一天关于 grid 的文章，搜到你这行代码破防了，简直是看不懂在干嘛😂