网格布局 HTML CSS grid layout demo

文章目录

页面效果

代码 (HTML + CSS)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局 grid layout demo wuyujin1997</title>
    <style>
        * {
            outline: auto;
        }
        .fill_parent {
            min-height: 60vh;
            max-width: 90%;
        }

        .grid_container > div {
            background-color: pink;
            /* 左右居中 */
            text-align: center;
            /* 上下居中 */
            align-content: center;
        }
        .item_header { grid-area: a; }
        .item_left_menu { grid-area: c; }
        .item_main_content { grid-area: d; }
        .item_right { grid-area: e; }
        .item_footer { grid-area: b; }
        .grid_container {
            display: grid;
            /* grid 或 grid-template-areas 都可以 */
            grid-template-areas:
                'a a a a a'
                'c d d d e'
                'c d d d e'
                'b b b b b'
            ;
            grid-gap: 10px;
            background-color: gray;
        }

    </style>
</head>
<body>

    <p>start p</p>
    <div class="grid_container fill_parent">
        <div class="item_header"><span>header content</span></div>
        <div class="item_left_menu"><span>left_menu content</span></div>
        <div class="item_main_content"><span>main_content content</span></div>
        <div class="item_right"><span>right content</span></div>
        <div class="item_footer"><span>footer content</span></div>
    </div>
    <p>end   p</p>

</body>
</html>

参考

相关推荐
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart4 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter