移动端grid网格布局

最新推荐文章于 2024-11-25 20:32:08 发布

「已注销」

最新推荐文章于 2024-11-25 20:32:08 发布

阅读量2.2k

点赞数

分类专栏：技巧文章标签： css grid 网格布局

本文链接：https://blog.youkuaiyun.com/kingAn123/article/details/99219288

版权

技巧专栏收录该内容

3 篇文章

订阅专栏

本文介绍了移动端的Grid网格布局，适用于移动端块状入口门板布局，具有良好的自适应性。文中通过示例1和示例2详细展示了如何设置父级和子级的CSS样式，包括外层和内层的CSS规则。同时提到了PC端的应用，指出Grid布局在单个元素自适应方面的挑战，并提及minmax属性和等效单位的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适用于移动端块状入口门板布局，多行

应该更适用于PC端，自适应浏览器，拉伸缩小，布局改变

文章目录

一、效果

在这里插入图片描述

二、示例

1、示例1

第一种示例只需要在父级写grid布局即可
列2端对齐、中间列居中
中间行边距设值

html
外层css

.parent{
    display: grid;
    grid-template: auto auto auto / auto auto auto;
    grid-row-gap: 36rpx;
    
    justify-content: space-between;
    justify-items: center;
    
    align-items: center;
}

内层css

2、示例2

在这里插入图片描述

第二种示例父级、子级都要写grid布局
列间距设值
行间距设值
第一个子项占2列

外层css

parent{
    display: grid;
    grid-template: auto auto auto / auto auto auto;
    grid-row-gap: 20rpx;
    grid-column-gap: 20rpx;
}

内层css

child-item {
    ...
    &:first-child {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

三、PC端示例

不止布局在自适应，单个item也在自适应(flex等自适应方案难做到)

在这里插入图片描述
PC端掘金博客
 minmax属性

另外单位：1fr
等同于flex布局的flex: 1;

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com