理解GridLayout-优快云博客

本文详细解析了HTML和CSS中的GridLayout布局方式，介绍了如何使用grid-template-columns、grid-template-rows、grid-template-areas等属性创建复杂的网页布局，并讲解了grid-gap、grid-auto-columns、grid-auto-rows等属性的作用。

grid layout布局

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GridLayout</title>
</head>
<body>
<div class="container">
    <div class="item-a item1">header</div>
    <div class="item item2">main</div>
    <div class="item item3">sidebar</div>
    <div class="item item4">footer</div>
</div>
</body>
</html>

CSS

.container {
            display: grid;/*块级网格*/
            /*display: inline-grid;!*内联网格*!*/

            /*<track-size>表示可用空间的长度 <line-name>任意名称
             */
            /*不定义行名，但网格会自动分配正数和负数*/
            grid-template-columns: 40px 50px auto 50px 40px;
            grid-template-rows: 25% 100px auto;
            /*定义行名，一行也可以有多个名字，如[row1-end row2-start]
             *对于重复部分，可以使用repeat表示，如grid-template-columns: repeat(3, 20px [col-start])
              其等价于...:[col-start] 20px [col-start] 20px [col-start] 20px;
             */
            grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
            grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [lastline];

            /*
             *该fr单元允许将轨道的大小设置为网格容器的可用空间的一部分
             */
            grid-template-columns: 1fr 1fr 1fr; /*将每个item设为网格容器宽度的三分之一*/
            grid-template-columns: 1fr 50px 1fr 1fr; /*fr单元可用的总可用空间量不包括50px*/

            /*创建四列三行高的网格
             *整个顶行将由标题区域组成。
             *中间行将包括两个主要的区域，
             *一个空单元格和一个侧边栏区域。
             *最后一行是所有页脚。
             */
            grid-template-areas:
                    "header header header header"
                    "main main . sidebar"
                    "footer footer footer footer";

            /*用于复合属性 grid-template-rows,
             *grid-template-columns,grid-template-areas
             *
             */
            grid-template:
                    [row1-start] "header header header" 25px [row1-end]
                    [row2-start] "footer footer footer" 25px [row2-end]
                    / auto 50px auto;
            /*与上面形式等价*/
            grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
            grid-template-columns: auto 50px auto ;
            grid-template-areas:
                    "header header header"
                    "footer footer footer";

            /*指定网格线的大小,即是列行之间装订线的宽度
             *间隔仅在列行之间创建，而不是在外边缘之间创建
             *不带前缀的column-gap和row-gap已经可以使用，Chrome 68 +，Safari 11.2 Release 50+和Opera 54+
             */
            grid-row-gap: 15px;
            grid-column-gap: 10px;

            /*复合属性
             *...:<grid-row-gap> <grid-column-gap>
             *不带前缀的gap已经可以使用，Chrome 68 +，Safari 11.2 Release 50+和Opera 54+
             */
            grid-gap: 15px 10px;

            /*沿着内联（行）轴对齐网格项
             *start 将要与其单元格的起始边缘齐平的项目对齐
             *end -将item与其单元格的结束边缘齐平
             *center -对齐其单元格中心的位置
             *stretch -填充单元格的整个宽度（default）
             *也可以在通过justify-items在单个网格项上设置此行为
             */
            justify-items: start;
            justify-items: end;
            justify-items: center;
            justify-items: stretch;

            /*沿着块（列）轴对齐网格项，此值适用于容器内的所有网格项
             *也可以通过align-self在单个网格项上设置此行为
             */
            align-items: start;
            align-items: end;
            align-items: center;
            align-items: stretch;

            /*
             *align-items和justify-items的复合属性
             *place-items: <align-items> <justify-items>;
             *除Edge之外的所有主流浏览器都支持place-items;
             */
            place-items: center center;

            /*有时网格的总大小可能小于其网格容器的大小，
             *如果所有的网格项的大小都是非灵活单元，则会发生
             *此属性沿着内联（行）轴align-content对齐网格
             */
            justify-content: start;
            justify-content: end;
            justify-content: center;
            justify-content: stretch;
            justify-content: space-around;
            justify-content: space-between;
            justify-content: space-evenly;

            /*
             *此属性沿着块(列)轴对齐网格
             */
            align-content: start;
            align-content: end;
            align-content: center;
            align-content: stretch;
            align-content: space-around;
            align-content: space-between;
            align-content: space-evenly;

            /*
             *除Edge外的所有浏览器都支持place-content属性
             */
            place-content: start center;
            place-content: center;/*等价于place-content: center center*/

            /*指定任何自动生成的网格轨道（也称为隐式网格轨道）的大小。
             *当网格项目多于网格中的单元格或网格项目放置在显式网格之外时，将创建隐式轨道.
             *隐式轨道可以使用grid-column和grid-row创建，假如一开始在容器内创建了2 X 2的网格，
             *当在 子项 中通过grid-column: <start>/<end>，grid-row: <start>/<end>引用不存在的行或列时，就会创建宽度为0的隐式轨道，
             *此时就可以用grid-auto-columns和grid-auto-rows来指定这些隐式轨道的宽度了
             *value 可以是网格中可用空间的长度，百分比或分数（fr单位）
             */
            grid-auto-columns: 50px;
            grid-auto-rows: 50px;

            /*
             */
            grid-auto-flow: row;
            grid-auto-flow: column;
            grid-auto-flow: dense;
        }
        .item-a {
            text-align: center;
            padding:20px;

            /*通过引用特定的网格线确定网格项在网格中的位置，
             *grid-column-start/././.：<number>|<name>; -> 引用一个网格线编号或者网格线名称
             *grid-column-end/././.: span <number>; ->该项跨越的网格轨道数量
             *grid-row-start/././.: span <name>; ->该项目将跨越直到该名称
             *grid-row-end/././.: auto; ->表示自动放置，自动跨度或默认跨度
             */
            grid-column-start: 1;
            grid-column-end: span col4-start;
            grid-row-start: 2;
            grid-row-start: span 2;

            /*分别为grid-column-start + grid-column-end,
             *grid-row-start + grid-row-end的简写
             */
            grid-column: 3 / span 2; /*从序号3开始跨2列*/
            grid-row: third-line / 4; /*从第三行开始到序号为4的行*/

            /*为项目指定名称，以便可以使用该grid-template-areas属性创建的模板引用该项目。
             *或者，此属性可用作grid-row-start +
             *grid-column-start +
             *grid-row-end +
             *grid-column-end更短的简写。
             */
            grid-area: 1 / col4-start / last-line / 6;

            /*沿着内联（行）轴对齐单元格内的网格项。
             *此值适用于单个单元格内的网格项。
             *
             *start - 将网格项对齐以与单元格的起始边缘齐平
             *end - 将网格项对齐以与单元格的结束边缘齐平
             *center - 将网格项对齐在单元格的中心
             *stretch - 填充单元格的整个宽度（这是默认值）
             */
            justify-self: start;
            justify-self: end;
            justify-self: center;
            justify-self: stretch;

            /*沿着块（列）轴对齐单元格内的网格项。
             *此值适用于单个网格项内的内容。
             */
            align-self: start;
            align-self: end;
            align-self: center;
            align-self: stretch;
            
            /*
             *align-self和justify-self的复合形式
             *place-self: <align-self> <justify-self>;
             *如果省略第二个数，则将第一个值分配给这两个属性
             */
            place-self: start center;
            place-self: auto;
        }
        .item1 {
            grid-area: header;/*为item指定名称*/
        }
        .item2 {
            grid-area: main;/*为item指定名称*/
        }
        .item3 {
            grid-area: sidebar;/*为item指定名称*/
        }
        .item4 {
            grid-area: footer;/*为item指定名称*/
        }