Grid 布局-子项补充及常用布局

上篇我们介绍了 Grid 布局容器项的内容, 看上去属性很多, 其实并没有, 记住关键的概念和简写就行啦.

因为是二维的, 这个属性的数量就比 flex 要多很多哦, 但其实真正也没有常用那没多啦.

定义网格: grid-template-rows / grid-template-columns ;
合并区域: grid-tempalte-areas / grid-area;
网格间隙: gap: 10px 20px;
子项对齐: place-items: end center;
整块对齐: place-content: start end;
隐式网格: grid-auto-flow / grid-auto-rows;

觉得还是很好理解的, 然后今天的重点是关于子项的一些属性的了解.

基于线的元素放置

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

这几个子项属性用来表示它占据的区域的起始位置和终止位置, 包括水平和垂直方向.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>子项: grid-column/row</title>

  <style>

    .main {

      width: 300px;

      height: 300px;

      background-color: pink;

      display: grid;

      grid-template-columns: 1fr 1fr 1fr;

      grid-template-rows: 1fr 1fr 1fr;

    }

    .main div:nth-of-type(1) {

      background-color: skyblue;

      grid-column-start: 2;

      grid-column-end: 3;

      /* 占两行, 默认是 auto */

      /* grid-row-start: 2;

      grid-row-end: 4; */

    }

    .main div:nth-of-type(2) {

      background-color: #ccc;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>1</div>

    <div>2</div>

  </div>

</body>

</html>

基于块的拓展可以用 span 同时要了解这些属性的各种简写.

grid-column: 2 / 3;
grid-row: 2 / 4;
grid-area: 2 / 2 / 4 / 3; 和上等价, 这尼玛谁记得住...

还是老老实实写一个个写属性, 虽然麻烦了点但是一看懂呀.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>子项: grid-column/row</title>

  <style>

    .main {

      width: 300px;

      height: 300px;

      background-color: pink;

      display: grid;

      grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];

      grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];

    }

    .main div:nth-of-type(1) {

      background-color: skyblue;

      /* span 表示个数, 从列2开始, 往后占2个位置 */

      /* grid-column-start: 2;

      grid-column-end: span 2; */

      /* grid-column-start: col2;

      grid-column-end: col4; */

      /* 简写方式 */

      /* grid-column: 2 / 3;

      grid-row: 2 / 4; */

      grid-area: 2 / 2 / 4 / 3;

    }

    .main div:nth-of-type(2) {

      background-color: #ccc;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>1</div>

    <div>2</div>

  </div>

</body>

</html>

子项对齐方式

和容器项是差不多的, 只不是是针对单个子项而已啦.

justify-self
align-self
place-self

具体的演示就不搞了, 一看便知, 而且在实际中也很要用到, 即便用到查一下就行喽.

repeat () 与 minmax()

repeat() 方法以及 auto-fill 可选值, 用于指定可重复的数值
minmax() 方法用来设置最小最大值的范围

最终都是为了实现简写而已, 其实也没啥.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>repeat</title>

  <style>

    .main {

      height: 400px;

      background-color: pink;

      display: grid;

      /* grid-template-columns: 100px 100px 100px; */

      /* grid-template-columns: repeat(3, 100px); */

      /* grid-template-columns: 100px repeat(2, 100px); */

      /* 列数不够则会多出的会进行折行 */

      /* grid-template-columns: repeat(3, 100px); */

      /* 自动根据父容器填充个数, 非常方便 */

      grid-template-columns: repeat(auto-fill, 100px);

      grid-template-rows: 100px;

    }

    .main div {

      background-color: skyblue;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

  </div>

</body>

</html>

然后是 minmax(), 就设置最小/最大的尺寸呗, 限制一波.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>minmax</title>

  <style>

    .main {

      height: 400px;

      background-color: pink;

      display: grid;

      /* 两侧固定, 中间自适应 */

      /* grid-template-columns: 100px 1fr 100px; */

      /* 设置最大最小值, 这里最小只能是 100px 啦 */

      grid-template-columns: 100px minmax(100px, 1fr);

      grid-template-rows: 100px;

    }

    .main div {

      background-color: skyblue;

      border: 1px solid #ccc;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>1</div>

    <div>2</div>

    <div>3</div>

  </div>

</body>

</html>

布局-响应式折行

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>minmax</title>

  <style>

    .main {

      height: 400px;

      background-color: pink;

      display: grid;

      /* 最小是200px宽, 当分辨率变化时, 会自动进行拉伸或者折行 */

      /* 响应式用得比较多呀, 当页面变小时, 内容进行折行 */

      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

      grid-template-rows: 100px;

      grid-auto-flow: 100px;

      gap: 20px 20px;

    }

    .main div {

      background-color: skyblue;

      border: 1px solid #000;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

    <div>10</div>

    <div>11</div>

  </div>

</body>

</html>

布局 -元素叠加

就类似于我们在看视频时, 屏幕右上方显示出 "直播" 的字样, 其实就是元素叠加效果, 以前的布局方式是采用 position -> 子绝父相 来实现. 但也可以用 grid 来轻松实现.

关键点就是, 让子项元素布局在同一个网格通过 grid-area, 这样就叠加啦.

它比定位要强的地方是, 能自适应的, 而定位可能不太好弄.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>叠加布局</title>

  <style>

    .main {

      width: 500px;

      height: 300px;

      background-color: pink;

      display: grid;

    }

    .main div {

      width: 500px;

      height: 300px;

      background-color: skyblue;

      grid-area: 1/1/1/1;

    }

    /* 直接通过子项 grid-area 让两个子项在一个区域不就叠加了嘛 */

    .main span {

      grid-area: 1/1/1/1;

      /* justify-self 调整下位置即可 */

      justify-self: end;

      margin: 10px;

    }

    .main p {

      grid-area: 1/1/1/1;

      align-self: end;

      margin: 0;

      background-color: rgba(0, 0, 0, 0.3);

      height: 30px;

      line-height: 30px;

      color: white;

    }

  </style>

</head>

<body>

  <div class="main">

    <div></div>

    <!-- 当容器项和子项一样尺寸时, 后面的的元素则溢出容器 -->

    <span>直播</span>

    <p>正在热卖中...</p>

  </div>

</body>

</html>

布局-多种组合排列

类似网页图片展示, 图片有大有小在页面上进行展示, 其实就是 合并单元格, 合并区域.

应用的就是 grid-area: row-start column-start row-end, column-end (先横后纵)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>多行多列布局</title>

  <style>

    .main {

      width: 300px;

      height: 300px;

      background-color: pink;

      display: grid;

      /* 3 x 3 的布局区域, 虽然实际只有6个块 */

      grid-template-columns: repeat(3, 1fr);

      grid-template-rows: repeat(3, 1fr);

      gap: 4px;

    }

    .main div {

      background-color: skyblue;

    }

    /* 对单元格1区域扩充, 其他的自己适应 */

    /* 四值的 grid-area: row-start column-start row-end, column-end (先横后纵)*/

    .main div:nth-of-type(1) {

      /* grid-area: 1/1/span 2 / span 2; */

      /* grid-area: 2/1/span 2 / span 2; */

      grid-area: 1/2/span2/span2;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

  </div>

</body>

</html>

布局-栅格布局

栅格布局是响应式系统最核心的一个环节, 简单理解就是栅格布局会将网页分为 12 或 24个栅格区域来划分宽度.

从百分比的视角, 类似页面的宽度是 100%; 如果是12个栅格, 则每个栅格的宽度是 8.33%;

如果一个容器的宽是3个栅格, 则其宽度为 8.33% * 3 = 24.99%.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>栅格布局</title>

  <style>

    .row {

      display: grid;

      grid-template-columns: repeat(12, 1fr);

      grid-template-rows: 50px;

      grid-auto-flow: 20px;

      background-color: pink;

    }

    .row div {

      background-color: skyblue;

      border: 1px solid #000;

    }

    .row .col-1 {

      grid-area: auto/auto/auto/span 1;

    }

    .row .col-2 {

      grid-area: auto/auto/auto/span 2;

    }

    .row .col-3 {

      grid-area: auto/auto/auto/span 3;

    }

    .row .col-4 {

      grid-area: auto/auto/auto/span 4;

    }

    .row .col-5 {

      grid-area: auto/auto/auto/span 5;

    }

    .row .col-6 {

      grid-area: auto/auto/auto/span 6;

    }

    .row .col-7 {

      grid-area: auto/auto/auto/span 7;

    }

    .row .col-8 {

      grid-area: auto/auto/auto/span 8;

    }

    .row .col-9 {

      grid-area: auto/auto/auto/span 9;

    }

    .row .col-10 {

      grid-area: auto/auto/auto/span 10;

    }

    .row .col-11 {

      grid-area: auto/auto/auto/span 11;

    }

    .row .col-12 {

      grid-area: auto/auto/auto/span 12;

    }

  </style>

</head>

<body>

  <div class="row">

    <div class="col-6">1</div>

    <div class="col-3">2</div>

    <!-- 超出就换行了 -->

    <div class="col-4">4</div>

    <div class="col-4">5</div>

  </div>

</body>

</html>

布局-容器自适应行列

grid 布局最擅长的就是这种行列的二维布局, 行或者列, 或者行列都能自适应哦, 强的一批.

先来看行自适应,

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>行自适应</title>

  <style>

    .main {

      /* 容器不设高度, 让盒子自动撑开, 宽度固定 */

      width: 300px;

      background-color: pink;

      display: grid;

      gap: 10px;

      grid-template-columns: repeat(3, 1fr);

      /* 隐式网格默认就是 rows 因此 grid-auto-flow: row 不用写 */

      grid-auto-rows: 100px;

    }

    .main div {

      background-color: skyblue;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <!-- 随着盒子增加, 会自动换行填充 -->

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <!-- 随着盒子增加, 会自动换行填充 -->

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <!-- 随着盒子增加, 会自动换行填充 -->

  </div>

</body>

</html>

再来看列自适应, 也是一样的操作, 行高固定, 列宽不设即可.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>行自适应</title>

  <style>

    .main {

      /* 容器不设宽度, 让盒子自动撑开, 高度固定 */

      height: 300px;

      background-color: pink;

      display: inline-grid;

      gap: 10px;

      grid-template-rows: repeat(3, 1fr);

      /* 列的话, 要设置隐式网格为 colum */

      grid-auto-flow: column;

      grid-auto-columns: 100px;

    }

    .main div {

      background-color: skyblue;

    }

  </style>

</head>

<body>

  <div class="main">

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <!-- 随着盒子增加, 会自动换列填充 -->

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <!-- 随着盒子增加, 会自动换列填充 -->

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <!-- 随着盒子增加, 会自动换列填充 -->

  </div>

</body>

</html>

至此, grid 子项的补充和一些常用的布局也介绍到这里啦, 用的是有能查就行.