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