寒假学习记录11：grid布局

作者：小小林熬夜学编程 | 2024-02-16 04:57:25

踩

寒假学习记录11：grid布局

display:grid


grid-template-columns: 100px 100px 100px  //指定每列的宽度
grid-template-rows: 100px 100px 100px    //指定每行的宽度


column-gap: 24px    //列间距
row-gap: 24px    //行间距
gap: 24px    //都设置

4.grid-template-areas用法


<!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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/90901