CSS3中的网格（grid）布局

最新推荐文章于 2024-10-13 20:52:25 发布

Tell℡

最新推荐文章于 2024-10-13 20:52:25 发布

阅读量147

点赞数 1

文章标签： CSS Grid 布局响应式设计网页开发三栏布局

本文链接：https://blog.csdn.net/weixin_66288388/article/details/126478062

版权

利用网格布局实现的一个左右300px中间自适应的布局

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

<head>
    <meta charset="UTF-8">
    <title>grid布局</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        /* 重要：设置容器为网格布局，宽度为100% */
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 200px;
            grid-template-columns: 300px auto 300px;
            /* 重要：设置网格为三列，
            并设置每列的宽度。即可。*/
        }

        .layout.grid .left {

            background: red;
        }

        .layout.grid .center {
            background: green;
        }

        .layout.grid .right {
            background: blue;
        }
    </style>
</head>

<body>
    <section class="layout grid">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>网格布局解决方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>
        </article>
    </section>
</body>

</html>

<body>
 
</body>

</html>