使用 Flexbox 和 Grid创建响应式布局

AROCS8-8

已于 2024-08-25 10:03:17 修改

阅读量120

点赞数 1

分类专栏：前端网页文章标签： css javascript css3

于 2024-08-25 09:59:34 首次发布

本文链接：https://blog.csdn.net/weixin_66004363/article/details/141524866

版权

前端网页专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用 Flexbox 和 Grid 创建一个简单的三栏布局，能够在不同屏幕尺寸上自动调整。

当浏览器宽度大于768像素时，页面会显示三列布局；而当宽度小于768像素时，布局会自动调整为单列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
    <style>
        body {
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            width: 100%;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 18px;
        }
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Column 1</div>
        <div class="item">Column 2</div>
        <div class="item">Column 3</div>
    </div>
</body>
</html>

运行结果如下：

1、125%