寒假学习记录11：grid布局

博丽七七2024-02-14 15:55

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