Css3新布局---Grid网格

网格布局是css3中新增加的一种布局方式,比flex更加强大。

flex属于一维布局,对于高度不能灵活控制。

grid网格布局是二维布局,通过行和列来分配网页空间。

通过下面这个小游戏可以简单体会到网格布局的强大。

网格布局小游戏

关键概念

  1. 容器和项目

与flex布局相同,网格布局也有父元素和子元素,在父元素上设置display:grid就可以启用网格布局,父元素称为容器,子元素称为项目。

  1. 轨道

grid布局的轨道分为行和列,可以通过相关属性设置行和列的数量和大小

  1. 单元

行轨道和列轨道交叉的区域称为单元,是最小的网格单位

  1. 区域

多个网格单元可以合并为一个区域,单个单元也可以叫做一个区域

  1. 网格线

行与行之间、列与列之间的交界处叫做网格线,网格布局会自动为网格线编号,行与列分别编号,都从1开始,网格线的数量比单元数量多一

  1. 间隔

两个网格之间的横向或纵向间距称为间隔,间隔的数量比单元数少一

  1. fr

fr是一个网格布局中的一个单位,表示剩余空间按份数分配

  1. span

span+数字可以表示跨越的单元格数量

容器属性

行与列

grid-template-columns设置列数和每列的大小
grid-template-row设置行数和每行的大小

要设置display:grid

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

可以使用fr或百分比做单位

.grid-container {
  display: grid;
  grid-template-columns: 2fr 20% 3fr 40px;
}

repeat函数可以生成重复,下面两个等价

.grid-container {
  display: grid;
  grid-template-columns: repeat(2,1fr,20%);
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 20% 1fr 20%;
}

布局对齐

justify-content和align-content两个属性设置盒子的对齐方式。
place-content 属性是上面两个属性的合并,先垂直后水平。

下面的值都可以使用,各自有不用的用途,与flex中的属性取值相同

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准,一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
.box1 {
  justify-content: space-enenly;
  align-content: space-around;
}
.box2 {
  place-content: space-around space-evenly;
}

内容对齐

justify-items属性设置单元格内容的水平位置(左中右)
align-items属性设置单元格内容的垂直位置(上中下)。
place-items属性是align-items属性和justify-items属性的合并简写形式,先垂直后水平。

可以取到下面的值

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。
.container1 {
  justify-items: end;
  align-items: start;
}

.container2 {
  place-items: start end;
}

间距

grid-row-gap属性设置行与行的间隔(行间距)
grid-column-gap属性设置列与列的间隔(列间距)
grid-gap是上面两个元素的合并,先行后列

.container1 {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

.container2 {
  grid-gap: 20px 20px;
}

项目属性

网格合并

grid-column是一个简写,是grid-column-start和grid-column-end的组合。
grid-row是一个简写,是grid-column-start和grid-column-end的组合。
这个属性用来合并网格,grid-column合并列,grid-row合并行

属性值为两个数字,表示网格线的标号,用 / 分割,从第一条开始,到第五条结束。

item1 {
  grid: 1 / 5
}

可以使用span来指定跨越的数量,跨越3列

.item1 {
  grid-column: 1 / span 3;
}

可以用负值表示倒数第一根网格线。从第一根到倒数第一根

.item1 {
  grid-column: 1 / -1;
}

grid-area可以同时指定合并的行和列
4个值分别为行的开始,列的开始,行的结束,列的结束

从第一行,第二列开始,到第五行,第六列结束。

.item {
  grid-area: 1 / 2 / 5 / 6;
}

grid-area还可以配合父元素的grid-template-areas属性进行合并和布局。
通过grid-area为单元格命名,grid-template-areas来通过命名布局。

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
 
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

对齐

justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。
align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。
space-self是上面两个属性的简写。

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

最后真的强烈推荐玩玩这个小游戏。
网格花园—grid布局小游戏

参考:
CSS Grid 网格布局教程
菜鸟教程
网格花园

你可能感兴趣的:(css,css3,css,前端)