【前端】CSS-Grid网格布局

目录

  • 一、grid布局是什么
  • 二、grid布局的属性
  • 三、容器属性
    • 1、display
      • ①、语句
      • ②、属性值
    • 2、grid-template-columns属性、grid-template-rows属性
      • ①、定义
      • ②、属性值
        • 1)、固定的列宽和行高
        • 2)、repeat()函数
        • 3)、auto-fill关键字
        • 4)、fr关键字
        • 5)、minmax()函数
        • 6)、auto关键字
    • 3、grid-row-gap属性、grid-column-gap属性、grid-gap属性
    • 4、grid-template-areas属性
    • 5、grid-auto-flow属性
      • ①、语法
      • ②、属性值
    • 6、justify-items属性、align-items属性、place-items属性
      • ①、语法
      • ②、属性值
    • 7、justify-content属性、align-content属性、place-content属性
      • ①、语法
      • ②、属性值
    • 8、grid-auto-columns属性、grid-auto-rows属性
  • 四、项目属性
    • 1、grid-column-start属性、grid-column-end 属性
    • 2、grid-row-start属性、grid-row-end 属性
    • 3、justify-self 属性、align-self 属性、place-self 属性
      • ①、语法
      • ②、属性值
  • 五、应用场景
  • 六、Grid布局和flex布局二者区别
  • 七、总结

一、grid布局是什么

grid布局:网络布局,是目前唯一一种CSS二维布局方式,一种新的CSS布局模型,由纵横相交的两组网络线形成的框架性布局结构,能够同时处理行与列。号称是最强大的CSS布局方案。

擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系

Grid布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。

二、grid布局的属性

Grid布局属性可以分为两大类

  1. 容器属性
  2. 项目属性

三、容器属性

1、display

①、语句

.wrapper {
  display: grid / inline-grid;
}

②、属性值

  • grid:该容器元素是一个块级元素
  • inline-grid:该容器元素为行内元素

一旦声明,这个元素的所有直系子元素将成为网格项目

2、grid-template-columns属性、grid-template-rows属性

①、定义

  • grid-template-columns:属性设置列宽
  • grid-template-rows:属性设置行高

②、属性值

1)、固定的列宽和行高

.wrapper {
  display: grid;
  /*  声明了三列,宽度分别为 200px 100px 200px */
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  声明了两行,行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}

2)、repeat()函数

可以简化重复的值,该函数接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。比如上面行高都是一样的,我们可以使用repeat()函数进行实现,实际效果是一样的

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行,而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}

3)、auto-fill关键字

表示自动填充,让一行(或者一列)中尽可能的容纳更多的单元格

.wrapper-2 {
  display: grid;
  /* 列宽200,但是列的数量是不固定的*/
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

4)、fr关键字

fr单位代表网格中可用空间的一等份,可以帮助我们创建灵活的网格轨道

.wrapper {
  display: grid;
  /* 第一个列宽设置为 200px,第二个列宽为剩余宽度的1/3,第三个列宽为剩余宽度的2/3 */
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

5)、minmax()函数

有的时候我们想给网格元素一个最小和最大的尺寸,minmax()函数产生一个长度范围,表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数,分别为最小值和最大值

.wrapper-4 {
  display: grid;
  /* 第三个列宽最少也是要 300px,但是最大不能大于第一第二列宽的两倍。 */
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

6)、auto关键字

由浏览器决定长度。通过auto关键字,我们可以轻易实现三列或者两列布局

.wrapper-5 {
  display: grid;
  /* 表示第一第三列为 100px,中间由浏览器决定长度,自适应 */
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

3、grid-row-gap属性、grid-column-gap属性、grid-gap属性

grid-row-gap属性、grid-column-gap属性分别设置行间距和列间距, grid-gap属性是两者的简写形式

  • grid-row-gap:10px:表示行间距是10px
  • grid-column-gap:30px:表示列间距是30px
  • grid-gap:10px 30px:表示行间距是10px,列间距是30px
.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-auto-rows: 50px;
  /* 行间距是10px */
  grid-row-gap: 10px;
  /* 列间距是20px */
  grid-column-gap: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  /* 行间距是10px; 列间距是20px */
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

4、grid-template-areas属性

grid-template-areas属性用于定义区域,一个区域由一个或者多个单元格组成

一般这个属性跟网格元素的grid-area一起使用,在这里会一起介绍。grid-area属性指定项目放在哪一个区域

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

上面代码表示划分出6个单元格,其中值得注意的是 . 符号代表空的单元格,也就是没有用到该单元格
以上代码表示将类.sidebar .content .header所在的元素放在上面grid-template-areas中定义的sidedar content header区域中

5、grid-auto-flow属性

①、语法

grid-auto-flow 属性控制着自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,即下图英文数字的顺序 one,two,three…。这个顺序由 grid-auto-flow 属性决定,默认值是 row

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

②、属性值

  • grid-auto-flow:row:表示根据实际情况排列,可能会存在空白等情况
  • grid-auto-flow:row dense:表示尽可能填满表格,下面存在长度合适的就会去填满上面的空白
  • grid-auto-flow:column:表示先列后行。就是按照顺序竖着排,一列排满就去排第二列,依次类推

6、justify-items属性、align-items属性、place-items属性

①、语法

justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格的垂直位置(上中下)

下面以justify-items属性为例进行讲解,align-items属性同理,只是方向为垂直方向。二者都有如下属性

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

②、属性值

  • start:对齐单元格的起始边缘
  • end:对齐单元格的结束边缘
  • center:单元格内部居中
  • stretch:拉伸,占满单元格的整个宽度(默认值)

7、justify-content属性、align-content属性、place-content属性

①、语法

justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)

下面以justify-content属性为例进行讲解,align-content属性同理,只是方向为垂直方向

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

②、属性值

  • start: 对齐容器的起始边框
  • end: 对齐容器的结束边框
  • center: 容器内部居中
  • space-around: 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍
  • space-between: 项目与项目的间隔相等,项目与容器边框之间没有间隔
  • space-evenly: 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔
  • stretch: 项目大小没有指定时,拉伸占据整个网格容器

8、grid-auto-columns属性、grid-auto-rows属性

在将grid-auto-columns属性和grid-auto-rows属性之前,先来看看隐式和显式网格的概念

**隐式和显式网格:**显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西,或者因为内容的数量而需要的更多网格轨道的时候,网格将会在隐式网格中创建行和列

假如有多余的网格(也就是上面提到的隐式网格),那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高

四、项目属性

1、grid-column-start属性、grid-column-end 属性

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

2、grid-row-start属性、grid-row-end 属性

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

3、justify-self 属性、align-self 属性、place-self 属性

①、语法

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

两者很相像,这里只拿 justify-self 属性演示,align-self 属性同理,只是作用于垂直方向。place-self 是设置。align-self 和 justify-self 的简写形式,这里也不重复介绍。

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

②、属性值

  • start:对齐单元格的起始边缘
  • end:对齐单元格的结束边缘
  • center:单元格内部居中
  • stretch:拉伸,占满单元格的整个宽度(默认值)

五、应用场景

  • fr 实现等分响应式
  • repeat + auto-fit——固定列宽,改变列数量
  • repeat+auto-fit+minmax 去掉右侧空白
  • repeat+auto-fit+minmax-span-dense 解决空缺问题

六、Grid布局和flex布局二者区别

  • flex布局是一维布局。一次只能处理一个维度上的元素布局,一行或者一列
  • Grid是二维布局。可以同时处理行和列
    【前端】CSS-Grid网格布局_第1张图片

七、总结

通过使用CSS-Grid,可以创建复杂的布局,如响应式的多列网格、媒体查询、网格项的自适应大小和位置等。CSS-Grid通过定义网格行和列来组织内容,并使用网格容器和网格项将内容放置在网格中。CSS-Grid的主要优点是它提供了更灵活的布局选项,比如可以定义不同的网格行和列的大小和位置,而且不需要使用复杂的浮动和定位技术。

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