Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月28日 学号：478291 Grid（网格布局）
Blogger Information
Blog 24
fans 4
comment 0
visits 20135
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月28日 学号：478291 Grid（网格布局）
Lin__
Original
813 people have browsed it

基本定义

  • 分为容器（container）与项目（item）
  • 网格线（grid lines）：划分网格的线，分为水平网格线（划分行）以及垂直网格线（划分列），通常网格线会比行数或列数多1
  • 轨道（grid tracks）：两条网格线之间形成的空间，能够设置宽度,单位为px（像素），%（百分比），fr（比例）
  • 单元格（grid cell）：四条网格线包裹起来的封闭空间
  • 网格区域（grid area）：多个单元格组成的封闭矩形区域
  • 网格间距（grid gap）：行或列之间的间隙

容器属性

  • display:grid;：定义容器采用网格布局
  • grid-template-colums：划分列，定义每一列的列宽
序号 属性值 描述
1. npx npx npx 像素值，固定宽度，有多少个值代表有多少列，以空格隔开，如：150px 150px 150px，代表三列，每一列的宽度为150像素
2. nfr nfr nfr 按照比例分配每一个单元格的宽度，如：1fr 1fr 1fr，代表三列按照1：1：1的比例分配容器的空间；如果为1fr 1fr 2fr，则代表最后一列的宽度为前两列宽度的2倍
3. repeat(要重复的次数,要重复的值) 如：repeat(2,150px)，代表2列，每列的宽度为150像素；repeat(2,150px 150px 150px)，代表6列，每3列按照150px 150px 150px的顺序和数值设置列宽
4. minmax(最小值,最大值) 产生一个宽度范围，表示宽度就在这个范围之中。可代表一个列宽值

示例：

  1. display:grid;
  2. grid-template-columns:150px 150px 150px ;

  1. display:grid;
  2. grid-template-columns:150px 1fr 2fr ;

  1. display:grid;
  2. grid-template-columns:150px minmax(50px,100px) 1fr ;

  1. display:grid;
  2. grid-template-columns:repeat(3,150px 150px 150px) ;

  • grid-template-rows：划分行，定义每一行的行高
序号 属性值 描述
1. npx npx npx 像素值，固定行高，有多少个值代表有多少行，以空格隔开，如：150px 150px 150px，代表三行，每一行的行高为150像素
2. nfr nfr nfr 按照比例分配每一个单元格的行高，如：1fr 1fr 1fr，代表三行按照1：1：1的比例分配容器的空间；如果为1fr 1fr 2fr，则代表最后一行的行高为前两行行高的2倍
3. repeat(要重复的次数,要重复的值) 如：repeat(2,150px)，代表2行，每行的行高为150像素；repeat(2,150px 150px 150px)，代表6行，每3行按照150px 150px 150px的顺序和数值设置行高
4. minmax(最小值,最大值) 产生一个高度范围，表示高度就在这个范围之中。可代表一个行高值

示例如下：

  1. display:grid;
  2. grid-template-rows:150px 150px 150px ;

  1. width:600px;
  2. height:500px;
  3. display:grid;
  4. grid-template-rows:150px 1fr 2fr ;

  1. display:grid;
  2. grid-template-rows:150px minmax(50px,100px) 1fr ;

  1. display:grid;
  2. grid-template-rows:repeat(3,10px 10px 10px) ;

  • grid-template-areas：定义每个单元格的名称，使用''包裹，代表一行，每一行中每一个单元格的名称使用空格隔开，若名称相同，则自动合并为一个区域
    示例如下：

    1. display:grid;
    2. grid-template-rows:200px 200px 200px ;
    3. grid-template-columns:200px 200px 200px ;
    4. grid-template-areas:'hello hello 3'
    5.                   '4 5 6'
    6.                   '7 8 9';

  • grid-column-gap：列与列之间的间隙，属性值为像素值
    示例如下：

    1. grid-template-rows:190px 190px 190px ;
    2. grid-template-columns:190px 190px 190px ;
    3. border: 2px dashed #0f74a8;
    4. grid-column-gap:10px;

  • grid-row-gap：行与行之间的间隙，属性值为像素值
    示例如下：
    1. display:grid;
    2. grid-template-rows:190px 190px 190px ;
    3. grid-template-columns:190px 190px 190px ;
    4. border: 2px dashed #0f74a8;
    5. grid-row-gap:10px;
  • grid-gap与gap：前两个属性的缩写，若行与行、列与列之间的间隙相同，可以使用该属性
    示例如下：
    1. display:grid;
    2. grid-template-rows:190px 190px 190px ;
    3. grid-template-columns:190px 190px 190px ;
    4. border: 2px dashed #0f74a8;
    5. grid-gap:10px;

    项目属性

  • grid-row-start与grid-row-end：定义行开始与结束的位置，值为网格线编号
  • grid-colum-start与grid-colum-end：定义列开始与结束的位置，值为网格线编号
    示例如下：
    1. border: 2px dashed red;
    2. grid-row-start:1;
    3. grid-row-end:3;
    4. grid-column-start:1;
    5. grid-column-end:4;
    6. background-color: yellow;

    网格布局完成用户评论

    代码如下：
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>用户评论组件</title>
    6.  <link rel="stylesheet" href="user-reply.css">
    7.  <link rel="stylesheet" href="../../../css/iconfont.css">
    8. </head>
    9. <body>
    10. <!--用户评论组件主体-->
    11. <div class="user-reply">
    12.  <!--用户评论 评论区-->
    13.  <div class="user-reply-enter">
    14.      <p class="user-reply-title">我要评论</p><!--评论区 标题 -->
    15.      <div class="user-reply-enter-input"><!--评论区 用户填写区域 -->
    16.          <img src="../../../images/user.png" alt="用户头像"><!--评论区 用户填写区域 用户头像 -->
    17.          <textarea name="reply_str" id="" cols="30" rows="10"></textarea><!--评论区 用户填写区域 输入框 -->
    18.      </div>
    19.      <button>发表评论</button><!--评论区 提交按钮 -->
    20.  </div>
    21.  <!--用户评论 评论区 end-->
    22.  <!--用户评论 回复区-->
    23.  <div class="user-reply-comment">
    24.      <p class="user-reply-title">最新回复</p><!--回复区 标题 -->
    25.      <!--回复区 回复列表 -->
    26.      <div class="user-reply-comment-list">
    27.          <!--回复区 回复列表 列表项 -->
    28.          <div class="user-reply-comment-item">
    29.              <img src="../../../images/user.png" alt="用户头像"><!--回复区 回复列表 用户头像 -->
    30.              <!--回复区 回复列表 内容区域 -->
    31.              <div class="user-reply-comment-item-detail">
    32.                  <span>用户昵称</span><!--回复区 回复列表 内容区域 用户昵称-->
    33.                  <span>回复内容</span><!--回复区 回复列表 内容区域 评论内容-->
    34.                  <div>
    35.                      <span>2019-12-26 20:00:00发表</span><!--回复区 回复列表 内容区域 评论时间-->
    36.                      <span><i class="iconfont icon-dianzan"></i>点赞</span><!--回复区 回复列表 内容区域 点赞按钮-->
    37.                  </div>
    38.              </div>
    39.              <!--回复区 回复列表 内容区域 end -->
    40.          </div>
    41.          <!--回复区 回复列表 列表项 end -->
    42.          <!--回复区 回复列表 列表项 -->
    43.          <div class="user-reply-comment-item">
    44.              <img src="../../../images/user.png" alt="用户头像"><!--回复区 回复列表 用户头像 -->
    45.              <!--回复区 回复列表 内容区域 -->
    46.              <div class="user-reply-comment-item-detail">
    47.                  <span>用户昵称</span><!--回复区 回复列表 内容区域 用户昵称-->
    48.                  <span>回复内容</span><!--回复区 回复列表 内容区域 评论内容-->
    49.                  <div>
    50.                      <span>2019-12-26 20:00:00发表</span><!--回复区 回复列表 内容区域 评论时间-->
    51.                      <span><i class="iconfont icon-dianzan"></i>点赞</span><!--回复区 回复列表 内容区域 点赞按钮-->
    52.                  </div>
    53.              </div>
    54.              <!--回复区 回复列表 内容区域 end -->
    55.          </div>
    56.          <!--回复区 回复列表 列表项 end -->
    57.      </div>
    58.      <!--回复区 回复列表 end -->
    59.  </div>
    60.  <!--用户评论 回复区 end-->
    61. </div>
    62. <!--用户评论组件主体 end-->
    63. </body>
    64. </html>
  1. @import url(../public_style.css);
  2. /*用户评论组件主体*/
  3. .user-reply{
  4.     margin: auto;
  5.     width:1200px;
  6.    padding-top: 10px;
  7. }
  8. /*标题*/
  9. .user-reply-title{
  10.     font-weight: bold;
  11.     padding: 10px 0;
  12. }
  13. /*用户评论 评论区*/
  14. .user-reply-enter{
  15.     border-top:1px solid #ccc;
  16.     display:grid;
  17.     grid-template-rows:50px 200px 50px;
  18.     grid-template-columns:1200px;
  19. }
  20. /*评论区 用户填写区域*/
  21. .user-reply > .user-reply-enter > .user-reply-enter-input{
  22.     display: grid;
  23.     grid-template-columns:50px 1fr;
  24.     grid-template-rows:200px;
  25.     align-items: start;
  26. }
  27. /*评论区 用户填写区域 用户头像*/
  28. .user-reply > .user-reply-enter > .user-reply-enter-input > img{
  29.     width: 50px;
  30.     height:50px;
  31.     margin-right: 20px;
  32. }
  33. /*评论区 用户填写区域 输入框*/
  34. .user-reply > .user-reply-enter > .user-reply-enter-input > textarea{
  35.     height: 200px;
  36.     margin-left: 20px;
  37. }
  38. /*评论区 提交按钮*/
  39. .user-reply > .user-reply-enter > button{
  40.     width:100px;
  41.     height:40px;
  42.     background-color: #953629;
  43.     margin-left: auto;
  44.     border:none;
  45.     color:#fff;
  46.     margin-top:10px;
  47. }
  48. .user-reply > .user-reply-enter > button:hover{
  49.     background-color: #0a6aa1;
  50.     cursor: pointer;
  51. }
  52. /*评论区 用户填写区域 end*/
  53. /*用户评论 评论区 end*/
  54. /*用户评论 回复区*/
  55. .user-reply > .user-reply-comment{
  57. }
  58. /*回复区 回复列表*/
  59. .user-reply > .user-reply-comment > .user-reply-comment-list{
  61. }
  62. /*回复区 回复列表 列表项*/
  63. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item{
  64.     margin-top: 30px;
  65.     width: 1200px;
  66.     display: grid;
  67.     grid-template-columns:70px 1fr;
  68.     grid-template-rows: 100px;
  69.     align-items: start;
  70. }
  71. /*回复区 回复列表 用户头像*/
  72. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item > img{
  73.     width: 50px;
  74.     height:50px;
  75. }
  76. /*回复区 回复列表 内容区域*/
  77. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item > .user-reply-comment-item-detail{
  78.     display: grid;
  79.     grid-template-rows:1fr 1fr 1fr;
  80. }
  81. /*-回复区 回复列表 内容区域 时间操作*/
  82. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item > .user-reply-comment-item-detail > div{
  83.     display: grid;
  84.     grid-template-columns:1fr 1fr;
  85. }
  86. /*回复区 回复列表 内容区域 点赞按钮*/
  87. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item > .user-reply-comment-item-detail > div > span:last-child{
  88.     text-align: right;
  89. }
  90. .user-reply > .user-reply-comment > .user-reply-comment-list > .user-reply-comment-item > .user-reply-comment-item-detail > div > span:last-child > i{
  91.     color:red;
  92. }
  93. /*回复区 回复列表 内容区域 end*/
  94. /*回复区 回复列表 列表项 end*/
  95. /*回复区 回复列表 end*/
  96. /*用户评论 回复区 end*/
  97. /*用户评论组件主体 end*/

运行效果如下：

grid布局手写笔记

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：仔细想一下, 网格布局是不是更简单, 更直观呢
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post