CSS 居然有比Flex更强大的布局?——Grid网格布局

前言

Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局,Grid 布局则是将容器划分成“行"”,产生单元格,然后指定"项目所在”的单元格,可以看作是二维布局Grid布局远比 Flex布局强大
示例

看到这可能还是不太懂,先看文章,体验Grid布局的强大之处

布局方式

  1. 传统布局方式
    利用position属性 + display属性 + float属性布局, 兼容性最好, 但是效率低, 麻烦!

  2. flex布局
    有自己的一套属性, 效率高, 学习成本低, 兼容性强!

  3. grid布局 dispaly:grid;
    网格布局(grid)是最强大的布局方案, 但是知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局好!

浏览器兼容性

兼容
可以看出目前流行的绝大部分浏览器基本都支持

基本概念

容器和项目

首先要了解容器和项目的关系

  1. 容器(有容器属性)
    容器

  2. 项目(有项目属性)
    项目

定义grid容器

要使 HTML 元素变成一个grid网格容器,可以将 display 属性设置为 grid 或 inline-grid。
例:display:grid | inline-grid;
grid 是块级网格,inline-grid 行内块级网格

  • display: grid的效果
    div {
      display: grid;
    }
    
    结果
  • display: inline-grid的效果
    div {
      display: inline-grid;
    }
    
    结果

注意,设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

行和列

容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。
行和列

单元格

行和列的交叉区域,称为"单元格"(cell)。
正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格。

网格线

划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。

正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线
网格线

上图是一个 4 x 4 的网格,共有5根水平网格线和5根垂直网格线。

总结
总结
阅读文章,理解此图🔝

练习代码

html

<body>
  <!-- 容器 -->
  <div class="main">
    <!-- 项目 -->
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
    <div class="item item-10">10</div>
  </div>
</body>

css

* {
  margin: 0;
  padding: 0;
}

.main {
  width: 600px;
  height: 400px;
  border: 10px solid #87ceeb;
  display: grid; /* grid网格布局 */
}

.item {
  font-size: 20px;
  color: #fff;
}

.item-1 {
  background-color: #fff000;
}

.item-2 {
  background-color: #00f000;
}

.item-3 {
  background-color: #ff00ff;
}

.item-4 {
  background-color: #397e7e;
}

.item-5 {
  background-color: #5b2990;
}

.item-6 {
  background-color: #bb3b3b;
}

.item-7 {
  background-color: #996525;
}

.item-8 {
  background-color: #9cbaad;
}

.item-9 {
  background-color: #638db6;
}

.item-10 {
  background-color: #100dbf;
}

容器属性

  1. grid-template-columns
  2. grid-template-rows
  3. row-gap
  4. column-gap
  5. gap(3和4的简写)
  6. grid-template-areas
  7. grid-auto-flow
  8. justify-items
  9. align-items
  10. place-items(8和9的简写)
  11. justify-content
  12. align-content
  13. place-content(11和12的简写)
  14. grid-auto-columns
  15. grid-auto-rows

头大😲这么多,白慌,大部分功能都是一样,会用就行

属性解析

grid-template-columns、grid-template-rows

  1. grid-template-columns 属性用于设置网格布局中的项目列数及宽度

    格式:grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;

    属性值解析:

    属性值解析
    none默认值,不指定列的大小。
    auto列的大小由容器的大小和列中网格元素内容的大小决定。
    max-content每列的大小设置为该列中最大网格元素的大小。
    min-content每列的大小设置为该列中最小网格元素的大小。
    length长度值,可以是 px 为单位的数值或百分比 %。 0 是默认值。 了解更多长度单位。例:100px
    initial将此属性设置为默认值。
    inherit从父元素继承该属性。

    例:grid-tenplate-columns: 100px 100px 100px;
    表示该容器中的项目以三列排列每列100px
    结果

  2. grid-template-rows 属性用于设置网格布局中的项目行数及高度。

    格式:grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;

    属性值解析:

    属性值解析
    none默认值,不指定行的大小。
    auto行的大小由容器的大小和行中网格元素内容的大小决定。
    max-content每行的大小设置为该列中最大网格元素的大小。
    min-content每行的大小设置为该列中最小网格元素的大小。
    length长度值,可以是 px 为单位的数值或百分比 %。 0 是默认值。 了解更多长度单位。例:100px
    initial将此属性设置为默认值。
    inherit从父元素继承该属性。

    例:grid-tenplate-rows: 100px 100px 100px;
    表示该容器中的项目以三行排列每行100px

扩展》》》
如果有100列或行,该怎样做呢?要写100个值?grid提供了方法 repeat()
格式:repeat(次数 | auto-fill, 重复的值)
例:grid-tenplate-columns: repeat(3, 100px); // 表示该容器中的项目以三列排列每列100px
auto-fill:有时,项目的大小是固定的,但容器大小不确定,这个属性就会自动填充应该几列或行
fr(fraction:片段):项目所占容器的比例,为了方便表示比例关系,网格布局提供了fr长度单位
例:grid-template-columns: repeat(3, 1fr); 也可以grid-template-columns: 1fr 1fr 1fr; // 表示该容器中的项目为3列每列占1份
minmax(最小值, 最大值) 该函数产生一个长度范围,表示长东就在这个范围之中
例:grid-template-columns: 100px minmax(100px, 1fr) 100px;
表示该容器项目有3列 第1列100px 第二列最小100px最大占1份 第三列100px

自己在页面上试下更容易理解

row-gap、column-gap、gap

  1. row-gap 指定项目的行之间的间隙。

格式:row-gap: length | normal | initial | inherit;

属性值解析:

属性值解析
length一个指定的长度,将设置行之间的差距 。例:20px
normal默认值。 指定行之间的正常间隙。
initial将此属性设置为其默认值。
inherit从其父元素继承此属性。

例:row-gap: 20px; // 项目行间隙为20px
row-gap
2. column-gap 指定项目的列之间的间隙。

格式:column-gap: length | normal;

属性值解析:

属性值解析
length一个指定的长度,将设置列之间的差距 。例:20px
normal默认值。 指定列之间的正常间隙。

例:column-gap: 20px;// 项目列间隙为20px
column-gap
3. gap 用来设置网格行与列之间的间隙,该属性是row-gap、column-gap的简写形式

格式:gap: row-gap column-gap;

例:gap:20px 20px; // 行与列间隙为20px 如果行与列值相同还可简写为 gap: 20px;
gap

grid-template-areas

网格布局允许在容器中指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。 由项目属性grid-area进行使用,下面会讲到

格式:grid-template-areas: none|itemnames;

属性值解析

属性值解析
none默认值,没有引用命名的网格。
itemnames指定每列和每行应如何显示。定义与列行相对应的区域名。例:‘a b c’ ‘d d d’ ‘e . f’

例: grid-template-areas: ‘a b c’
                                          ‘d e f’
                                          ‘g h i’ ;
注意: a、b、c 、… 是区域名,随意起;这些区域名对应着每列每行

体验👇

.main{
  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';
}

上面代码先划分出 9 个单元格,然后将其定名为 ai 的九个区域,分别对应这九个单元格。
使用上面代码所定义的区域:使项目1网格放到 d区域 👇

.item-1 {
  background-color: #fff000;
  grid-area: d;
}

结果
多个单元格合并成一个区域的写法如下。

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

上面代码将9个单元格分成a、b、c三个区域。

如果某些区域不需要利用,则使用"点"(.)表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

上面代码中,中间一列为点,表示没有用到该单元格,或者该单元格不属于任何区域。

grid-auto-flow

该属性指定容器中项目怎样排列

格式:grid-auto-flow: row| column | dense| row dense| column dense;

属性值解析:

属性值解析
row默认值。 通过填充每一行来放置网格元素,在必要时增加新列。(水平排列)
column通过填充每一列来放置网格元素,在必要时增加新列。(垂直排列)
dense该关键字指定自动布局算法使用一种"稠密"堆积算法,如果后面出现了稍小的元素,则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白,但同时也可能导致原来出现的次序被打乱。
row dense按行来填充网格中前面留下的空白
column dense按列来填充网格中前面留下的空白

例:grid-auto-flow: column; // 垂直方向上排列
grid-auto-flow

justify-items、align-items、place-items

  1. justify-items:设置项目内容的水平对齐方式(左中右)

    格式:justify-items: start | end | center | stretch;

    属性值解析:

    属性值解析
    start对齐单元格的起始边缘。(水平方向上)
    end对齐单元格的结束边缘。(水平方向上)
    center单元格内部居中。(水平方向上)
    stretch拉伸,占满单元格的整个宽度(默认值)。(水平方向上)

    例:justify-items: start;
    justify-items

  2. align-items:设置项目内容的垂直对齐方式(上中下)

    格式:align-items: start | end | center | stretch;

    属性值解析:

    属性值解析
    start对齐单元格的起始边缘。(垂直方向上)
    end对齐单元格的结束边缘。(垂直方向上)
    center单元格内部居中。(垂直方向上)
    stretch拉伸,占满单元格的整个宽度(默认值)。(垂直方向上)

    例:align-items: start;
    align-items

  3. place-items:justify-items和align-items的简写形式
    例:place-items: start end;
    注意:如果省略第二个值,则浏览器认为与第一个值相等。

justify-content、align-content、place-content

  1. justify-content:该属性是整个内容区域在容器里面的水平位置(水平方向上)

    格式:justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

    属性值解析:

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

    例:justify-content: start;
    justify-content

  2. align-content:该属性是整个内容区域的垂直位置(垂直方向上)

    格式:align-content: start | end | center | stretch | space-around | space-between | space-evenly;

    属性值解析:

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

    例:align-content: start;

  3. place-content:该属性是justify-content和align-content的简写形式
    例:place-content: center center; //项目相对于容器居中对齐
    注意:如果省略第二个值,则浏览器认为与第一个值相等。

    place-content

grid-auto-columns、grid-auto-rows

grid-auto-columns属性和grid-auto-rows属性用来设置浏览器自动创建的多余网格的列宽和行高。

下面的例子里面,划分好的网格是3行 x 3列,但是,10号项目指定在第4行。

.main{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 60px; 
}

上面代码指定设置行列以外的网格的行高统一为60px(原始的行高为100px)。
grid-auto

项目属性

  1. grid-column-start
  2. grid-column-end
  3. grid-row-start
  4. grid-row-end
  5. grid-column(1和2的简写形式)
  6. grid-row(3和4的简写形式)
  7. grid-area
  8. justify-self
  9. align-self
  10. place-self(8和9的简写形式)

头大😲怎么又这么多,白慌,大部分功能还都是一样,会用就行

属性解析

grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row

  1. grid-column-start、grid-column-end 可以理解为网格线的开始和结束位置,在这开始和结束之间就是该项目所占的位置(以列的顺序,从左往右)

    格式:
    grid-column-start: auto | span n | column-line;
    grid-column-end: auto | span n | column-line;

    属性值解析:

    属性值解析
    auto默认值,网格元素跨越一列。
    span n指定网格元素将跨越的列数。n 就是你指定的水平横跨几列数字 比如:span 2 水平横跨两列
    column-line指定从哪个网格线上开始水平横跨网格元素。数字形式 比如: 1 …

    例:grid-column-start: 1; grid-column-end: 3; //表示 水平方向上从第一根网格线横跨到第三根
    grid-column
    也可以 grid-clumn-start: span 2; //表示该项目横占二列(从左往右)
    grid-clumn-end:span 2; //表示该项目横占二列(从右往左)

  2. grid-row-start、grid-row-end 可以理解为网格线的开始和结束位置,在这开始和结束之间就是该项目所占的位置(以行的顺序,从上往下)

    格式:
    grid-row-start: auto | span n | column-line;
    grid-row-end: auto | span n | column-line;

    属性值解析:

    属性值解析
    auto默认值,网格元素跨越一列。
    span n指定网格元素将跨越的列数。n 就是你指定的垂直横跨几列数字 比如:span 2 垂直横跨两列
    column-line指定从哪个网格线上开始垂直横跨网格元素。数字形式 比如: 1 …

    例:grid-row-start: 1; grid-row-end: 3; //表示 垂直方向上从第一根网格线横跨到第三根
    grid-row

  3. grid-column 该属性是grid-column-start和grid-column-end的简写形式
    例:grid-column:1 / 3; //与上图结果一致
    注意:1 / 3 中的 / 符号不是除号,没有意义,只用来分隔两个参数

  4. grid-row该属性是grid-row-start、grid-row-end的简写形式
    例:grid-row: 1 / 3; //与上图结果一致

上面1,2图例解析👇
grid-row;grid-column

grid-area

grid-area属性指定项目放在哪一个区域。区域名是由grid-template-areas属性创建的

扩展》》》
grid-area 该属性还可作为grid-row-start、grid-column-start、grid-row-end、grid-column-end属性的简写形式
格式:grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
grid-area

justify-self、align-self、place-self

  1. justify-self、align-self 该属性单个网格中项目的水平、垂直对齐方式

    格式:
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch

    属性值解析:

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

    例:

    .item-1  {
      justify-self: start;
    }
    

    justify-self

  2. place-self 该属性是justify-self和align-self属性的简写形式

    格式:place-self: align-self justify-self;

    例:place-self: center center;
    place-self

    注意:如果省略第二个值,place-self属性会认为这两个值相等。




到这里就结束了,后续还会更新 vue 系列相关,还请持续关注!
感谢阅读,若有错误可以在下方评论区留言哦!!!

111

推荐文章👇
CSS Grid 网格布局教程 —— 阮一峰

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Thetimezipsby

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值