前端CSS3布局display:grid用法
2022-05-31 17:26:07

前端CSS3布局display:flex用法

1. 先附上代码

点击查看代码
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>display:flex</title>
    <style>
      .grid-box {
        width: 100%;
        background-color: lightseagreen;
      }

      .grid-box>div {
        background-color: lightskyblue;
        text-align: center;
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <div class="grid-box">
      <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>
  </body>

</html>

效果图

image

给grid-box加上display: grid

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
}

效果图

image

可以看到并没有什么变化,说明grid默认纵向排列

2. 接下来详解grid布局的几个常用属性

  • grid-template-columns
  • grid-template-rows
  • gap
  • grid-template-areas
  • justify-items
  • align-items

1. grid-template-columns

决定网格布局中的列数(和宽度)

网格呈三列排列且每列120px

上代码

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
    grid-template-columns: 120px 120px 120px;
}

效果图

image

简写方式

grid-template-columns: repeat(3, 120px)

也可这样设置

grid-template-columns: 120px auto 120px

两边的宽度为120px,中间的宽度自动填充

效果图

image

可用fr表示比例关系(fraction 的缩写,意为"片段”)

将宽度平均分成3等份

上代码

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

效果图

image

将宽度分成3份,每份各占1 2 3

上代码

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
}

效果图

image

单元格大小固定,但容器大小不确定,auto-fill属性就会自动填充

上代码

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
    grid-template-columns: repeat(auto-fill, 170px);
}

效果图

image

minmax()函数产生一个长度范围,接受两个参数,分别为最小值和最大值

上代码

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
    grid-template-columns: 1fr minmax(150px, 300px);
}

效果图

image

第二列的最小宽度为150px,最大宽度为300px

2. grid-template-rows

规定网格布局中行的高度

前三行每行高120px

上代码

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
    grid-template-rows: 120px 120px 120px;
}

效果图

image

简写方式

grid-template-rows: repeat(3, 120px)

也可这样设置

grid-template-rows: 120px auto 120px

第一行高度为120px,第二行的高度自动,第三行的高度为120px

效果图

image

可用fr表示比例关系(fraction 的缩写,意为"片段”)

将前三行的高度设置为1fr 2fr 3fr

上代码

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
    grid-template-rows: 1fr 2fr 3fr;
}

效果图

image

minmax()函数产生一个长度范围,接受两个参数,分别为最小值和最大值

上代码

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
    grid-template-rows: 80px minmax(150px, 300px) 120px;
}

效果图

image

3. gap

规定网格布局中行与列之间间隙的尺寸

上代码

点击查看代码
.grid-box {
    width: 100%;
    background-color: lightseagreen;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 2fr 3fr;
    gap: 1em;
}

效果图

image

还可以这样写

grid-gap: 1em 2em;

1em是行之间的间隙,2em是列之间的间隙

效果图

image

4. grid-template-areas

在网格布局中规定区域

上代码

点击查看代码
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>display:flex</title>
    <style>
      .item1 {
        grid-area: myArea1;
      }

      .item5 {
        grid-area: myArea5;
      }

      .item8 {
        grid-area: myArea8;
      }

      .grid-box {
        width: 100%;
        background-color: lightseagreen;
        display: grid;
        grid-template-areas:
          'myArea1 myArea1 . . '
          'myArea5 myArea8 . . '
          'myArea5 myArea8 . . ';
      }

      .grid-box>div {
        background-color: lightskyblue;
        text-align: center;
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <div class="grid-box">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
      <div class="item6">6</div>
      <div class="item7">7</div>
      <div class="item8">8</div>
    </div>
  </body>

</html>

效果图

image

myArea1 myArea1 . .表示4列,一个点表示1列

item1占1行2列(第1行的第1列和第2列)

item5占2行1列(第1列的第2行和第3行)

item8占2行1列(第2列的第2行和第3行)

4. justify-items

纵轴上的对齐方式

上代码

点击查看代码
.grid-box {
    width: 100%;
    height: 600px;
    background-color: lightseagreen;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

效果图

image

justify-items: flex-start;(默认值)

效果图

image

justify-items: center;

效果图

image

justify-items: flex-end;

效果图

image

4. align-items

横轴上的对齐方式

上代码

点击查看代码
.grid-box {
    width: 100%;
    height: 600px;
    background-color: lightseagreen;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

效果图

image

align-items: flex-start;(默认值)

效果图

image

align-items: center;

效果图

image

align-items: flex-end;

效果图

image

本文摘自 :https://www.cnblogs.com/


更多科技新闻 ......