V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PageSpeed 相关文档
为 NGINX 编译 PageSpeed 支持
ngx_pagespeed
Configuring mod_pagespeed Filters
加载性能测试工具
WebPagetest
Gomez
JCZ2MkKb5S8ZX9pq
V2EX  ›  前端优化

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

  •  
  •   JCZ2MkKb5S8ZX9pq · 2021-01-26 20:16:25 +08:00 · 1740 次点击
    这是一个创建于 1157 天前的主题,其中的信息可能已经有所发展或是发生改变。
    .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 啥的还没试,先来问问。
    21 条回复    2022-05-13 21:48:41 +08:00
    old9
        1
    old9  
       2021-01-26 21:55:49 +08:00   ❤️ 1
    grid-template-columns: repeat(auto-fill, minmax(min(calc(45vw - .5em),300px), 1fr));


    后面的问题 border-image 可以实现,现在浏览器支持已经比较好了
    JCZ2MkKb5S8ZX9pq
        2
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-26 22:13:24 +08:00
    @old9
    这个加 min 我之前也考虑过,用来限制字体的上下限,没有生效。
    但刚才在测试网页上写又是有效的,刚才看到说可能是 less 的问题,我明天再试试看。谢谢。
    JCZ2MkKb5S8ZX9pq
        3
    JCZ2MkKb5S8ZX9pq  
    OP
       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
        4
    mascteen  
       2021-01-26 22:44:06 +08:00
    linear-gradient
    old9
        5
    old9  
       2021-01-26 22:59:05 +08:00   ❤️ 1
    我看他好像是写了 flex 没用(?)而是用绝对定位+transform 硬算出来的网格布局,你可以改成 flex 或者 grid 试试。
    JCZ2MkKb5S8ZX9pq
        6
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-26 23:23:44 +08:00
    @old9
    试了好像没效果。
    如果是有 transform 的话,我看看能不能把那个先去掉,之前倒没注意。
    JCZ2MkKb5S8ZX9pq
        7
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-26 23:27:51 +08:00
    @old9
    感谢提醒。去掉了 transform 和 absolute 的定位方式( important 覆盖),这样改完再套 flex 是可以了。
    JCZ2MkKb5S8ZX9pq
        8
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-26 23:30:02 +08:00
    @old9 transform 这个小数点的属性倒是第一次注意到
    ianva
        9
    ianva  
       2021-01-26 23:33:50 +08:00
    @old9 这个 ID 让人想起当年那篇 on having layout
    old9
        10
    old9  
       2021-01-26 23:39:36 +08:00
    @ianva 哈看来是老同志了,现在写 CSS 多幸福啊
    JCZ2MkKb5S8ZX9pq
        11
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-26 23:44:03 +08:00
    @old9
    再请教一下,grid 布局时,好像每个格子都默认带有 overflow:hidden 属性(刚才刚好有 border 和 shadow 碰到)。
    请问这个属性能够去掉嘛?
    还是只能在 item 上套一层,用 margin/padding 之类的替代 gap ?
    JCZ2MkKb5S8ZX9pq
        12
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-26 23:46:24 +08:00
    @old9 哦,不对不对,是被别的东西 overflow 挡住了,是我搞错了。
    JCZ2MkKb5S8ZX9pq
        13
    JCZ2MkKb5S8ZX9pq  
    OP
       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
        14
    old9  
       2021-01-27 14:10:03 +08:00   ❤️ 1
    一般都有 escape 功能吧,查了一下 less 是 ~'xxx' :
    http://lesscss.org/#escaping
    JCZ2MkKb5S8ZX9pq
        15
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-27 18:10:20 +08:00
    @old9 给大佬递茶
    JCZ2MkKb5S8ZX9pq
        16
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-28 10:10:45 +08:00
    @old9
    试了一下 border-image,chrome 下不支持 border-radius,请问有解嘛?
    JCZ2MkKb5S8ZX9pq
        17
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-28 10:13:27 +08:00
    @old9
    想到可以在图上直接画个圆角,但不晓得是否支持 svg,而且万一需要调整颜色大小粗细也感觉有点麻烦。不知道有没有什么更好的解法。
    old9
        18
    old9  
       2021-01-29 15:14:08 +08:00
    可以 css 里面用 inline svg,基本可以调
    old9
        19
    old9  
       2021-01-29 15:35:47 +08:00
    JCZ2MkKb5S8ZX9pq
        20
    JCZ2MkKb5S8ZX9pq  
    OP
       2021-01-29 15:41:50 +08:00
    @old9 大佬牛逼👍🏻👍🏻👍🏻
    zhaomeicheng
        21
    zhaomeicheng  
       2022-05-13 21:48:41 +08:00
    @old9 看了一天关于 grid 的文章,搜到你这行代码破防了,简直是看不懂在干嘛😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   952 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 21:09 · PVG 05:09 · LAX 14:09 · JFK 17:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.