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

[JCZ2MkKb5S8ZX9pq]

.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 啥的还没试，先来问问。

[old9]

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


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

[JCZ2MkKb5S8ZX9pq]

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

[JCZ2MkKb5S8ZX9pq]

@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]

linear-gradient

[old9]

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

[JCZ2MkKb5S8ZX9pq]

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

[JCZ2MkKb5S8ZX9pq]

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

[JCZ2MkKb5S8ZX9pq]

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

[ianva]

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

[old9]

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

[JCZ2MkKb5S8ZX9pq]

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

[JCZ2MkKb5S8ZX9pq]

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

[JCZ2MkKb5S8ZX9pq]

@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]

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

[JCZ2MkKb5S8ZX9pq]

@old9 给大佬递茶

[JCZ2MkKb5S8ZX9pq]

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

[JCZ2MkKb5S8ZX9pq]

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

[old9]

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

[old9]

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

[JCZ2MkKb5S8ZX9pq]

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