【CSS】使用网格布局实现响应式网页

最新推荐文章于 2024-07-12 20:49:16 发布

是光の谢宣骞

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量145

点赞数

分类专栏： css专栏前端demo 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_45870740/article/details/127178688

版权

前端demo 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css专栏

4 篇文章 0 订阅

订阅专栏

效果展示

在这里插入图片描述

由于gif格式展示大小超过限制，这里就使用静图来代替了。

完整代码

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('./index.css');
    </style>
</head>

<body>
    <!-- 响应式 -->
    <div id="activeDiv">
        <ul class="flow">
            <li>
                <a>
                    <img src="https://source.unsplash.com/BhcutpohYwg/800x800"/>
                </a>
            </li>
            <li>
                <a>
                    <img src="https://source.unsplash.com/pQyIutdScOY/800x800" />
                </a>
            </li>
            <li>
                <a>
                    <img src="https://source.unsplash.com/55JRsxcAiWE/800x800" />
                </a>
            </li>
            <li>
                <a>
                    <img src="https://source.unsplash.com/5wn6DeAEcmE/800x800" />
                </a>
            </li>
            <li>
                <a>
                    <img src="https://source.unsplash.com/7jCYw6a2Wao/800x800" />
                </a>
            </li>
            <li>
                <a>
                    <img src="https://source.unsplash.com/j5KAuRrYX7g/800x800" />
                </a>
            </li>
        </ul>

    </div>

</body>

</html>

css

index.css
body{
    width: 100%;
    margin: 0 auto;
}

.flow{
    max-width: 55rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(14rem,1fr));
    grid-gap: 0; 
    padding: 1.5rem;
}
li{
    list-style: none;
}
a{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    padding: 0;
}

开发技巧

minmax()函数的使用

以下代码对grid布局的影响

	display: flex;
    flex-direction: column;
    justify-content: flex-end;

原因：img原本是inline-block元素，将其父元素设置为弹性布局后，其变为block元素，长宽受父元素影响，可以尝试注释代码查看效果的变化。

是光の谢宣骞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS】使用网格布局实现响应式网页

除了使用媒体查询实现响应式网页外，网格布局也可以实现响应式布局。
复制链接

扫一扫

专栏目录

【CSS】使用网格布局实现响应式网页

效果展示

完整代码

开发技巧

“相关推荐”对你有帮助么？