关于css gird 布局的学习记录-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53805327/article/details/129771193

这个是需要的html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    * {
        border: 1px rebeccapurple solid;
    }

    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gird {
        width: 500px;
        height: 500px;
    }
</style>

<body>
    <div class="gird">
        <div class="colimn1">colimn1</div>
        <div class="colimn2">colimn2</div>
        <div class="colimn3">colimn3</div>
        <div class="colimn4">colimn4</div>
        <div class="colimn5">colimn5</div>
        <div class="colimn6">colimn6</div>
    </div>
</body>

</html>

然后运行一下他大概长这样

然后加上这点代码

.gird {
        width: 500px;
        height: 500px;
        display: grid;
        /* 网格-模板-列 */
        grid-template-columns: 100px 100px 100px;
        /* 网格-模板-行 */
        grid-template-rows: 100px 100px 100px;
    }

他就每行每列占100px 排了长这样：

当然我们可以用gird 的单位 fr

把代码一部分改成这样

.gird {
        width: 500px;
        height: 500px;
        display: grid;
        /* 网格-模板-列 */
        grid-template-columns: 1fr 1fr 2fr;
        /* 网格-模板-行 */
        grid-template-rows: 1fr 2fr;
    }

他就会这样

这个1fr 我理不太清但可以大概体会到他大概就是把盒子分了几份然后行列那样占，哈哈哈

然后再把代码改成这样

.gird {
        width: 500px;
        height: 500px;
        display: grid;
        grid-template-columns: 1fr 1fr 2fr;
        grid-template-rows: 1fr 2fr;

        /* 列间距 */
        column-gap: 10px;
        /* 行间距 */
        row-gap: 30px;
    }

会成这样大概

这个应该很容易懂我感觉

然后就是排列元素

在容器上用

grid-template-areas

在内容里面用

grid-area

然后用下他做个这样的图片

我之前学了弹性盒模型 flex 然后想排布这个反正没想出来，但是现在用gird我会了

之前逛知乎的时候就有个评论让用flex布局这个，不知道有没有大佬能把这个布局下

哈哈哈

代码大概长这样

.gird {
        width: 500px;
        height: 500px;
        display: grid;

        grid-template-areas:
            "q1 q1 q2"
            "q3 q4 q2"
            "q3 q5 q5"
            "q6 q6 q6";
    }

    .colimn1 {
        grid-area: q1;
        background-color: red
    }

    .colimn2 {
        grid-area: q2;
        background-color: aqua;
    }

    .colimn3 {
        grid-area: q3;
        background-color: fuchsia;
    }

    .colimn4 {
        grid-area: q4;
        background-color: greenyellow;
    }

    .colimn5 {
        grid-area: q5;
        background-color: palevioletred;
    }

    .colimn6 {
        grid-area: q6;
        background-color: darkmagenta;
    }

然后结果是这样

然后就是和轴有关

控制上下方向的 align-items

控制左右方向的 justify-items

也不知道为啥要叫align轴

把代码改成这样

.gird {
        width: 500px;
        height: 500px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px;
        
    }

    .gird>div {
        width: 70px;
        height: 70px;
    }

他的布局大概是这样

现在想让他都在中间就用

.gird {
        width: 500px;
        height: 500px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px;
        align-items: center;
        justify-items: center;
    }

然后就是这样

接下来就是如果内容没填满容器可以控制他的内容对齐方式

align-content 上下

justify-content 左右

比如这样

样式是这样

.gird {
        width: 500px;
        height: 500px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px;
        align-content: end;
        justify-content: center;
    }