CSS网格

2022-11-22 本文已影响0人败于化纤

单词
grid ：网格 / 栅格（古瑞的）
row：行
column :列（阔了目）
template ：模板（探不累）
justify：调整
content：内容
item ：项目
container：容器
self ：自已
fracion :片段
area:地区，区域（唉儿瑞而）
10areas：十个区域
1area：一个区域

grid 布局系统术语

Grid container 网格内容
Grid item 网格项目
Grid line 网格容器
行轴：Grid row
列轴：Grid column

1.定义网格容器display: grid

被设置display: grid属性的元素将会变成网格容器。
Display 属性

当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。

2.定义显式网格

grid-template-columns：定义显式网格列(列数和列宽)
grid-template-rows：定义显式网格行(行数和行高)
**grid-template: **grid-template-columns 和grid-template-rows的简写属性，定义显式网格(网格列,网格行,网格区域)。
属性值：
1. fr 单位， grid-template-columns: repeat(3,2fr);/*设置三列,没一列都占比1份

none 默认值。在需要时创建列。
auto 列的尺寸取决于容器的大小以及列中项目内容的大小。
max-content 根据列中最大的项目设置每列的尺寸。
min-content 根据列中最小的项目设置每列的尺寸。
length 设置列的尺寸，通过使用合法的长度值。参阅长度单位。

grid-template-areas:定义显式网格区域
示例：

.box{
                grid-template-areas:
                "header header header"
                "main main main"
                "footer footer footer";

}

3.定义隐式网格

grid-auto-rows：定义隐式网格的行高
** grid-auto-columns:** 定义隐式网格的列宽

4.（1）定义网格沿行轴/列轴的对齐方式(父元素应用)

justify-content:定义网格沿行轴的对齐方式
align-content:定义网格沿列轴的对齐方式
justify-items:定义网格单元沿行轴的对齐方式
align-items:定义网格单元沿列轴的对齐方式
示例1：
justify-content

.container{
  /* ***************关于对齐项目(2)************************************** */
           justify-content: end; /* 沿着水平轴对齐到水平终点. */
           justify-content: start; /* 沿着水平轴对齐到水平起点 */
           justify-content: space-around;
            justify-content: space-between;
            justify-content: space-evenly;
            justify-content: center;/* 沿着水平轴对齐到水平居中 */
}

示例2：
align-items:

    .container{
  /* ***************关于对齐项目(1)*************************** */
          align-items: flex-end;  /* 对齐到当前行内内沿垂直轴终点 */
           align-items: flex-start;  /* 对齐到当前行内沿垂直轴的起点 */
            align-items: stretch;  /* 默认 */
           align-items: center;  /* 沿当前行内居中 */
}

4.（2）定义网格沿行轴/列轴的对齐方式(子元素应用)

align-self：覆盖 align-items的值
justify-self:覆盖 justify-items值
属性值：
- stretch:它是此属性的默认值，它使内容填充到单元格的整个宽度。
- normal:这是微不足道的属性，即在块级布局和替换的absolutely-positioned框中充当开始，在其他绝对定位的框，表和flex布局中处于拉伸状态，在网格布局中被视为拉伸，除非在少数情况下，例如框以高宽比作为起始值。
auto:它是位于父元素中的justify-items属性使用的值，或默认为正常值。它是默认值。
baseline：它使当前框的第一个或最后一个基线集的对齐基线与baseline-sharing组中所有框的共享的第一个或最后一个基线集中的对应基线对齐。第一个基准的fall-back值是开始，最后一个基准的fall-back值是结束。
start：它允许内容自行对齐到单元格的左侧。
end:它使内容可以在单元格的右侧对齐。
center：它允许内容使其自身与单元格的中心对齐。
flex-start:与起始值相同。
flex-end:与最终值相同。
self-start:它将项目在项目的开头对齐到对齐容器的左侧。
self-end:它将项目在项目末尾对齐到对齐容器的右侧。
left:它使物品包与对齐容器的左侧齐平。如果属性的轴与内联轴不平行，则它与start相同。
right:它使项目包装与对齐容器的右侧齐平。如果属性的轴与内联轴不平行，则其作用与末端相同。
safe:如果项目溢出对齐容器，则使该项目对齐为起始值。
unsafe:不管相对大小对齐容器和项目如何，它都会使项目按给定值对齐。
示例1：
align-self：

  .container{
  /* **********垂直对齐子元素*************** */
           align-self: center; /* 对齐到侧轴的居中位置 */
           align-self: flex-end; /* 对齐到侧轴的终点位置 */
     align-self: flex-start;/*对齐到侧轴的起点位置*/
}

示例2：
justify-self:

  .container{
/* **********水平对齐子元素*************** */
            justify-self: center;/*  */
            justify-content: flex-end; /* */
            justify-content: flex-start;/*  */
}

5.网格间距

可以通过使用以下属性之一来调整间隙大小：
column-gap：属性设置列间距：
row-gap ：属性设置行间距：
gap：属性是 row-gap 和 column-gap 属性的简写属性
示例：

.container{
 /* *********************网格间距************************** */
           column-gap: 10px  /*每一列之间相隔10px */
          row-gap: 10px;  /* 每一行之间相隔10px */
             gap: 10px; /*每一列和一行之间相隔10px */
}

6.设置跨行跨列

grid-column-start:设置起始列线
grid-column-end：设置结束列线
grid-column 属性：是 grid-column-start 和 grid-column-end 属性的简写属性。
grid-row-start:设置起始行线
grid-row-end：设置结束行线
grid-row: grid-row-start和 grid-row-start的复合属性
grid-area 属性：可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
示例1：

.container  .item1{
        /* ****************跨行************************** */
          grid-column-start: 1;  /* 启始线 */
            grid-column-end: 3; /*结束线 */
            /* grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性。 */
         grid-column: 1 / span 2 ;    /*跨列复合属性： 从跨线1开始到跨线3结束 */
        }

示例2：

 .container .box1{
   /* ****************跨列*************************** */
               grid-row-start: 1 ;/*起始位置 */
              grid-row-start: 3;/*结束位置 */
             grid-row: 1 / 2; /* grid-row-start和 grid-row-start的复合属性*/
              /* grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。 */
  grid-area: 1 / 2 / 5 / 6;
}

7.网格响应式

minmax(200px,1fr)) :每一行可以大于等于200px ,但不能小于.1fr

  @media screen and (max-width:800px){
            .container{
                /* grid-template-columns: 1fr; */
                 /* **********网格响应式,视口宽度小于500网格布局换为2行显示***************** */
                grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
                /* repeat(auto-fill :自适应
                ,minmax(200px,1fr))  :每一行可以大于等于200px ,但不能小于.1fr*/
            }

定义网格模板列:列数和列宽

grid-template-columns： 属性定义网格布局中的列数，并可定义每列的宽度。

  /* ***************************定义网格模板列:列数和列宽********************* */
            /* grid-template-columns: 100px 200px 300px;  */
            /* grid-template-columns: 20% 40% 20%; */
            /* grid-template-columns: 1fr 1fr 1fr 1fr; */
            grid-template-columns: repeat(3,1fr);/*设置三列,没一列都占比1份*/
            /* grid-template-columns: repeat(3,300px); */

8.创建网格模板区域的步骤

第一步：创建网格系统
第二步：创建模板（确定父元素和子元素）
第三步: 创建名称
第四步：指定列数列宽行数行宽