寒假学习记录11:grid布局

css 复制代码
display:grid
css 复制代码
grid-template-columns: 100px 100px 100px  //指定每列的宽度
grid-template-rows: 100px 100px 100px    //指定每行的宽度
css 复制代码
column-gap: 24px    //列间距
row-gap: 24px    //行间距
gap: 24px    //都设置

4.grid-template-areas用法

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        width: 100px;
        display: grid;
        grid-template-areas: 
            "header header header"
            "sidebar content content"
            "footer footer footer";
        gap: 10px;
    }
    header{
        width: 1fr; height: 30px;
        grid-area: header;
        background-color: red;
    }
    main{
        width: 60px; height: 50px;
        grid-area: content;
        background-color: aqua;
    }
    aside{
        width: 40px; height: 50px;
        grid-area: sidebar;
        background-color: green;
    }
    footer{
        width: 1fr; height: 30px;
        grid-area: footer;
        background-color: blue;
    }
</style>
<body>
    <div class="container">
        <header></header>
        <aside></aside>
        <main></main>
        <footer></footer>
    </div>
</body>
</html>

效果

align和justify和flex一样

grid特有的浮动单位:fr

长度为 当前fr / 总fr

相关推荐
Senar2 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
时光追逐者11 分钟前
MongoDB从入门到实战之MongoDB快速入门(附带学习路线图)
数据库·学习·mongodb
一弓虽16 分钟前
SpringBoot 学习
java·spring boot·后端·学习
烛阴20 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言24 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴34 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
genggeng不会代码2 小时前
用于协同显著目标检测的小组协作学习 2021 GCoNet(总结)
学习
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端