Grid布局

Grid 布局

概述

• 阮一峰老师Grid布局原文

• 原文中由很多案例，并附有代码，方面学习。

• Grid布局可以将布局区域划分成网格样式i，每一个Item存在于单元格中。并进行控制

基本概念

• 与flex 一致主要由父容器控制子元素的位置，不同的是在子元素中还可以在进一步设置

• 详见原文

容器属性

父容器时属性

• display:grid: 指定父容器为栅格布局容器

• display:inline-grid:指定此容器为行内块元素的栅格布局容器

• grid-template-columns:指定子元素在列中如何排列（横向）

• grid-template-rows:指定子元素在行中如何排列（纵向）

  • repeat():函数快速设置属性

    • 第一个参数为同事设置几个参数

    • 后面的参数可一个（所有被控制的元素一致）

    • 后面的参数可一组（按组设置）

  • auto-fill: 自动填充,设置在repeat方法第一个参数时，表示自动填充

  • fr: 片段 1fr 2fr 第二个为第一个的一倍

  • minmax(): 接收两个参数选取区间minmax(100px, 200px);

  • []:网格命名 grid-template-rows:[r1] 100px [r2] 200px;

    • 在子元素中可以通过命名进行控制

  • 两栏快速布局: grid-template-columns:70% 30%;

  • grid-template-areas:设置区域

     .container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        grid-template-areas: 'a b c'
        'd e f'
        'g h i';
       }
   //  在子元素属性中可以得到控制
  

  • grid-row-gap:子元素行间距

  • grid-columns-gap:子元素列间距

  • grid-gap:以上两个设置的缩写grid-gap:20px 20px;

  • grid-auto-flow:row/columns/row dense/columns dense;

    • 默认排列顺序

    • justify-items:子元素在单元格中的水平位置

    • align-items:子元素在单元格中的垂直位置

    • place-items:以上两个属性的缩写

      • 可设置的属性

      • start/end/center/stretch(拉伸-默认值)

      • justify-content:子元素整体在父容器中的水平位置

      • align-content:子元素整体在父容器中的垂直位置

      • place-content:以上两个属性的缩写

        • 可设置属性同flex

        • gird-auto-columns/grid-auto-rows:如包含多余子元素自动创建网格

        • grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

        • grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

          • 从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。

        子元素属性

        • grid-column-start属性：左边框所在的垂直网格线

        • grid-column-end属性：右边框所在的垂直网格线

        • grid-row-start属性：上边框所在的水平网格线

        • grid-row-end属性：下边框所在的水平网格线

        • grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

        • justify-self 属性设置单元格内容的水平位置（左中右）

        • align-self属性设置单元格内容的垂直位置（上中下）

        • place-self以上两个属性的缩写

          • start：对齐单元格的起始边缘。

          • end：对齐单元格的结束边缘。

          • center：单元格内部居中。

          • stretch：拉伸，占满单元格的整个宽度（默认值）。