001GRID布局基础案例小练

wow_DG

已于 2024-08-07 13:05:45 修改

阅读量409

点赞数 5

文章标签： html5 css

于 2024-07-21 16:20:15 首次发布

本文链接：https://blog.csdn.net/2301_77798916/article/details/140589559

版权

案例小练

页面效果要求大致如下：

过程：

1. 准备工作

创建html文件，准备好页面结构。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
       // ...
    </style>
  </head>
  <body>
    <div class="wow">
        <div class="head">head</div>
        <div class="main">main</div>
    </div>
  </body>
</html>

2. grid划分 <head> 和<main>

分析：将它分成上下两部分，只需要划分行数，以及每份所占比例（等分），这里为1：4。

创建grid容器，子元素默认行宽 == others兄弟

*{
  padding: 0;
  margin:  0;
}
.wow {
  height: 1080px;
  width:  1920px;
  /* 声明grid容器 */
  display: grid;        

 >.head,
 >.main {
          border: #2649fa 5px solid;
          text-align: center;
          font-size: 	100px;
        }
}

效果图：

这里行宽比例为：header : main == 1 : 4 ,再加个网格间距。

/* 定义行宽 */

grid-template-rows: 20% 80%;
/* 网格间距 */
grid-gap: 20px;

效果图（按f12可以看划分线）：

3. 在<main>里面布局划分<aside>和<content>

分析：<main> 可以将它看作他是由左边浅绿色和右边边框为蓝色的部分组成，直接划分成左右两部分，只需要划分列数为2，，以及每份所占等分，这里为1：2 。

这里它们两个占的部分可用fr表示：

fr 单位

轨道可以使用任何长度单位进行定义。

网格引入了 fr单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

简单来说 ==>[数字]fr就是切糕，nfr就是1/n的蛋糕

<div class="main">
  <div class="aside">aside</div>
  <div class="content">content</div>
</div>

下面style代码块将<main>划分成 5份 = 1 ( fr )+ 4 ( fr ) ,那么 ifr == 20%

.main {
  border: none!important;  /* 去掉原来边框，权重不够后面加！important */
  display: grid;
  grid-gap: 20px;
  /* 设置列 */
  grid-template-columns: 1fr 4fr;

  .aside{
    background-color: #b5e61d;
  }
  .content{
    border: #5df2ff 5px solid ;
  }
}

效果图：

4. 在<content>划分子元素【`grid-template-areas` 与`grid-area`】

分析：按照成果图<content>里面有 5 个子元素，我们来试一下多行多列用grid-template-areas 和grid-area完成，我们看一下行数列数划分

等分划分为1 ：2

等份划分为1：1：1：1：1

<div class="content">
  <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>

      .content {
        display: grid;
        /* 设列宽 */
        /* grid-template-columns: repeat(5,20%);  */ /* 重复函数(连续个数【auto-fill:自动填充】，设相同值) */
        grid-template-columns: repeat(5,1fr);  /* 重复函数(连续个数【auto-fill:自动填充】，占空间一等份) */
          /* 组合使用 */
        grid-template-rows:  1fr 2fr;
        /* 行间距 */
        grid-row-gap: 40px;
        /* 列间距 */ 
        grid-column-gap: 40px;
        grid-template-areas:  /* 每行数量必须与列数一致，否则无法显示*/ 
        "one two . . three"        /* 第一行 */ 
        " . four four four five";  /* 第二行 */ 
        >div{
            background-color: #21b14c;
        }
      }
      .item1{
        grid-area: one;
      }
      .item2{
        grid-area: two;
      }
      .item3{
        grid-area: three;
      }
      .item4{
        grid-area:four;
      }
      .item5{
        grid-area: five;
      }

最后再去掉<content>的背景色就结束啦！！！

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style lang="less">

.wow {
  height: 1080px;
  width: 1920px;
  /* 声明grid容器 */
  display: grid;

  /* 定义行宽 */
  grid-template-rows: 20% 80%;
  /* 网格间距 */
  grid-gap: 20px;
  >.head,
  >.main {
    border: #2649fa 5px solid;
    text-align: center;
    font-size: 100px;
  }
}
.main {
  border: none!important;  /* 去掉原来边框 权重不够加！important */
  display: grid;

  /* 设置列 */
  grid-template-columns: 1fr 4fr;

  /* 网格间距 */
  grid-gap: 20px;

  .aside{
    background-color: #b5e61d;
  }
  .content{
    /* border: #5df2ff 5px solid ; */
  }
}
.content {
  display: grid;
  /* 设列宽 */
  /* grid-template-columns: repeat(5,20%);  */ /* 重复函数(连续个数【auto-fill:自动填充】，设相同值) */
  grid-template-columns: repeat(5,1fr);  /* 重复函数(连续个数【auto-fill:自动填充】，占空间一等份) */
  /* 组合使用 */
  grid-template-rows:  1fr 2fr;
  /* 行间距 */
  grid-row-gap: 40px;
  /* 列间距 */ 
  grid-column-gap: 40px;
  grid-template-areas:  /* 每行数量必须与列数一致，否则无法显示*/ 
    "one two . . three"        /* 第一行 */ 
    " . four four four five";  /* 第二行 */ 
  >div{
    background-color: #21b14c;
  }
}
.item1{
  grid-area: one;
}
.item2{
  grid-area: two;
}
.item3{
  grid-area: three;
}
.item4{
  grid-area:four;
}
.item5{
  grid-area: five;
}
</style>
</head>
<body>
<div class="wow">
<div class="head">head</div>
<div class="main">
<div class="aside">aside</div>
<div class="content">
<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>
</div>
</div>
</body>
</html>