grid布局

ヾぁ影おジღ

已于 2022-12-21 10:10:07 修改

阅读量102

点赞数

分类专栏：笔记文章标签： css 前端 html

于 2022-12-20 09:40:53 首次发布

本文链接：https://blog.csdn.net/yml15180824993/article/details/128380102

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

grid布局
grid的常用属性
- 父元素属性
- 子元素属性
例子＋源码

grid布局

Flex 布局设计用于一维布局，无论是在一行中还是在一列中。它最适合用于沿着一个轴对齐项目并在它们之间分配空间的布局，
而grid布局用于二维布局，其中包括行和列。它最适合用于创建以网格模式排列项目的布局，网格布局比 flexbox 布局更强大，更灵活，但也可能更复杂。它具有更多的属性，更适合创建高级布局。
很多时候，我们可以将两者结合使用。

grid的常用属性

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout

父元素属性

属性：值	说明
display: grid	表示网格布局
grid-template-areas: ‘. . . . .’;	表示布局区域，每行五列
	配合子元素的grid-area使用，可以将子元素准确的排在某个位置
grid-template-rows: 200px 100px 150px;	表示每行的高度
grid-auto-rows: 500px;	表示每行的默认高度，会被 grid-template-rows 覆盖
grid-template-columns: auto auto 50% auto auto;	表示每列的宽度，auto的就平分剩余空间
grid-template-columns: repeat(12, 1fr);	表示创建 12 列，每列的宽度都是 1fr ，行的用法一样
grid-auto-columns: 50px;	表示每列的默认宽度，会被 grid-template-rows 覆盖
row-gap: 20px	行与行之间的间距
column-gap: 10px;	列与列之间的间距
place-items: center;	将 grid 布局内的所有元素水平垂直居中，也可以使用 justify-content 和 align-items 属性来将 grid 布局的内容水平垂直居中
grid-auto-flow: column;	表示逐列插入网格元素，从上到下，从左往右，将右边的两行排满后再从第二列开始排

子元素属性

属性：值	说明
grid-column: span 3;	指定元素占用的列数配合repeat(12, 1fr)
grid-area: header;	子元素所在区域的名称，有了名称后可以在父元素的 grid-template-areas中排版位置

例子＋源码

在这里插入图片描述

<!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>
    <style>
        /* ------------------------案例一-------------------------- */
        .container div {
            background-color: pink;
            /* 搭配flex布局设置水平垂直居中 */
            /* display: flex;
            align-items: center;
            justify-content: center; */
        }

        .container div:nth-child(2n) {
            background-color: aquamarine;
        }

        .container {
            display: grid;
            /* 表示每行五列 */
            grid-template-areas: '. . . . .';
            /* 表示每行的高度 */
            grid-template-rows: 200px 100px 150px;
            /* 表示每行的默认高度，会被 grid-template-rows 覆盖*/
            grid-auto-rows: 500px;
            /* 表示每列的宽度，auto的就平分剩余空间 */
            grid-template-columns: auto auto 50% auto auto;
            /* 表示每列的默认宽度，会被 grid-template-rows 覆盖*/
            grid-auto-columns: 50px;
            /* 行与行之间的间距 */
            row-gap: 20px;
            /* 列与列之间的间距 */
            column-gap: 10px;
            /* 将 grid 布局内的所有元素水平垂直居中，也可以使用 justify-content 和 align-items 属性来将 grid 布局的内容水平垂直居中*/
            /* place-items: center; */
        }

        /* ------------------------案例二-------------------------- */
        .container2 div {
            background-color: pink;
            /* 搭配flex布局设置水平垂直居中 */
            /* display: flex;
            align-items: center;
            justify-content: center; */
        }

        .container2 div:nth-child(2n) {
            background-color: aquamarine;
        }

        .container2 {
            margin-top: 50px;
            display: grid;
            row-gap: 20px;
            column-gap: 10px;
            /* 表示创建 12 列，每列的宽度都是 1fr ，行的用法一样*/
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(2, 1fr);
            /* 表示逐列插入网格元素，从上到下，从左往右，将右边的两行排满后再从第二列开始排 */
            grid-auto-flow: column;
        }

        .container2 .item11 {
            /* 指定元素占用的列数 */
            grid-column: span 3;
        }


        /* ------------------------案例三-------------------------- */
        .grid-container .item1 {
            grid-area: header;
        }

        .grid-container .item2 {
            grid-area: menu;
        }

        .grid-container .item3 {
            grid-area: main;
        }

        .grid-container .item4 {
            grid-area: right;
        }

        .grid-container .item5 {
            grid-area: footer;
        }

        .grid-container {
            display: grid;
            grid-template-areas:
                'header header header header header header'
                'menu main main main right right'
                'menu footer footer footer footer footer';
            grid-gap: 10px;
            background-color: #2196F3;
            padding: 10px;
        }

        .grid-container>div {
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">我占了浏览器的一半</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">我占了浏览器的一半</div>
        <div class="item9">9</div>
        <div class="item10">10</div>
        <div class="item11">11</div>
        <div class="item12">12</div>
    </div>

    <div class="container2">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
        <div class="item9">9</div>
        <div class="item10">10</div>
        <div class="item11">我占了三份</div>
        <div class="item12">12</div>
    </div>


    <h1 style="margin-top: 50px; text-align:center">可以像table一样合并</h1>
    <div class="grid-container">
        <div class="item1">Header</div>
        <div class="item2">Menu</div>
        <div class="item3">Main</div>
        <div class="item4">Right</div>
        <div class="item5">Footer</div>
    </div>
</body>

</html>