寒假学习记录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

相关推荐
吞掉星星的鲸鱼35 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6638 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端6 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡6 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木7 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5