grid布局

最新推荐文章于 2022-08-01 12:52:52 发布

远山眉

最新推荐文章于 2022-08-01 12:52:52 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/qq_43553067/article/details/100916696

版权

文章目录

grid布局

grid布局

传统布局， flex布局， grid布局的比较

学习的网站 https://cssgridgarden.com

1.1 grid-template-rows

    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>

      .parent {
        width: 500px;
        height: 500px;
        background: pink;
        display: grid;
        grid-template-rows: 100px 200px 100px 50px 50px; 
      }
      .item {
        border: 2px solid greenyellow;
        color: #fff;
        text-align: center;
        font-size: 20px;
      }

$[外链图片转存失败(img-Wcz8ibrk-1568685022892)(D:\2019.5月秋招准备\面试题\grid网格布局\2.png)]$

使用fr单位

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

fr单位是一个自适应单位，用来分割剩余的空间。如果剩余空间被设置为1fr 2fr 那么1fr就占整个剩余空间的1/3 2fr占整个剩余空间的2/3

$[外链图片转存失败(img-4m9CKxTo-1568685022893)(D:\2019.5月秋招准备\面试题\grid网格布局\3.png)]$

1.2 grid-template-columns

grid-template-row 配合 grid-template-column配合时，由grid-template-column决定分隔成的列数，grid-template-column设置每列的高度

        grid-template-rows: 50px 100px 60px; 
        grid-template-columns: 1fr 2fr 1fr

分割成三列，虽然行数被分割成了3行，但是由于没有足够多的item，所以只使用到了50px 100px

$[外链图片转存失败(img-RVbFyL2i-1568685022896)(D:\2019.5月秋招准备\面试题\grid网格布局\4.png)]$

1.3 行或列最小和最大尺寸 minmax()

使用minman()来创建行或列的最小最大尺寸，第一个参数是最小值，第二个参数是最大值。

      .parent {
        padding: 20px;
        width: 500px;
        height: 500px;
        background: pink;
        display: grid;
        grid-template-rows: minmax(100px, 200px) minmax(50px, 600px);
        grid-template-columns: 1fr 3fr 2fr;
      }

minmax的计算规则

由于rows决定的是每一列的高度，所以我们需要将其与盒子的总高度进行比较

height > max1Height + max2Height，取值max1Height, max2Height
height < min1Height + min2Height，取值min1Height, min2Hight
height < max1Height + max2Height 如上 500px < 200px + 600px

用 height - min1Height - min2Height = 500px - 100px - 50px = 350px

Height1 = 100px + 350px / 2

Height2 = 50px + 350px / 2

1.4 重复列或重复行 repeat(2, 100px)

repeat() 创建重复的网格轨道。接收两个参数，第一个参数是网格轨道的次数，第二个参数定义每个轨道的尺寸。

    <div class="parent">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div

    .parent {
        padding: 20px;
        width: 500px;
        height: 500px;
        background: pink;
        display: grid;
        grid-template-rows: repeat(2, 100px);
        grid-template-columns: repeat(3, 100px);
      }
      .item {
        border: 2px solid greenyellow;
        color: #fff;
        text-align: center;
        font-size: 20px;
      }

$[外链图片转存失败(img-ssRNlgz6-1568685022896)(D:\2019.5月秋招准备\面试题\grid网格布局\5.png)]$

1.5 间距 grid-gap

grid-column-gap 列之间的间距

grid-row-gap 行之间的间距

grid-gap grid-row-gap grid-column-gap

        grid-column-gap: 10px;
        grid-row-gap: 50px;

$[外链图片转存失败(img-9MJnsFJH-1568685022897)(D:\2019.5月秋招准备\面试题\grid网格布局\6.png)]$

如图，列与列之间的间隔为10px，行与行之间的间距为50px

1.6 使用网格线定位grid item

     .item1 {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column: 1;
        grid-column-end: 2;
        background: yellow;
      }

如上，给item1进行定位。显示效果如图

$[外链图片转存失败(img-SGNXaBRc-1568685022898)(D:\2019.5月秋招准备\面试题\grid网格布局\7.png)]$

缩写 grid-column: 3 / 4 需用 / 分割开

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

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

如果只指定了一个值，那么就是grid-row/column-start的值

四个属性的缩写 grid-area grid-row-start grid-column-start grid-row-end grid-column-end

上例中可以缩写为

```
grid-row: 2 / 3;
grid-column: 1 / 2
```
```
grid-area: 2 / 1 / 3 / 2
```

1.7 合并单元行和单元列定义在grid-item中

      .item1 {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
        background: yellow;
      }

$[外链图片转存失败(img-xAdw3Cmt-1568685022899)(D:\2019.5月秋招准备\面试题\grid网格布局\8.png)]$

另一种写法

        grid-row: 1 / span 2;
        grid-column: 1 / span 3;

1.8 grid-template-area

网格线定义网格区域

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      .parent {
        padding: 20px;
        background: pink;
        display: grid;
        text-align: center;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-template-rows: 150px 300px 150px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas : "header header header "
                   "sidebar content content "
                   "footer footer footer ";
      }
      .header {grid-area: header;background: #ffffff}
      .sidebar{grid-area: sidebar; background: blue}
      .content {grid-area: content; background: yellowgreen}
      .footer {grid-area: footer; background: plum}
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="header">header</div>
      <div class="sidebar">sidebar</div>
      <div class="content">content</div>
      <div class="footer">footer</div>
    </div>
  </body>
</html>

$[外链图片转存失败(img-wbLs2rpT-1568685022901)(D:\2019.5月秋招准备\面试题\grid网格布局\9.png)]$

远山眉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
grid布局

grid布局传统布局， flex布局， grid布局的比较学习的网站 https://cssgridgarden.com1.1 grid-template-rows <div class="parent"> <div class="item">1</div> <div class="item">2&l...
复制链接

扫一扫