devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

网格(grid)布局_grid-template-rows

作者：AllinToyou | 2024-03-23 13:05:32

赞

踩

grid-template-rows

目录

概述

使用网格布局水平垂直居中盒子

基本使用

1. 定义一个网格

 2. 操控列

 3. 操控行

4. 网格间隙

 5. 基于线号放置元素

 6. 使用 grid-template-areas 属性放置元素

 7. 控制元素如何排列

总结

概述

网格是由一系列水平（row 行）及垂直的线构（column 列）成的一种布局模式,  也就是说网格布局主要是操控行和列，面试呢常常会问到如何使一个盒子水平垂直居中是css中的一种布局方式，网格布局就是答案之一。

使用网格布局水平垂直居中盒子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .box {
  11.       width: 100px;
  12.       height: 100px;
  13.       background: skyblue;
  14.     }
  15.  
  16.     body {
  17.       display: grid;
  18.       justify-content: center;
  19.       align-items: center;
  20.       height: 100vh;
  21.       margin: 0;
  22.     }
  23.  
  24.     .box {
  25.       grid-area: box;
  26.     }
  27.   </style>
  28. </head>
  29.  
  30. <body>
  31.   <div class="box"></div>
  32. </body>
  33.  
  34. </html>

基本使用

1. 定义一个网格

设置元素的 display 值为 grid 或者 inline-grid，仅设置display为grid，而不控制行和列是没有任何效果的。其子元素依旧按照从上至下的默认布局进行排列。

  1. ............
  2. <head>
  3.   .............
  4.   <style>
  5.     .container {
  6.       display: grid;
  7.     }
  8.     .item {
  9.       background-color: orange;
  10.       word-break: break-all;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.   <div class="container">
  16.     <div class="item">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  17.     <div class="item">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  18.     <div class="item">ccccccccccccccccccccccccccccccccccccccccccccccc</div>
  19.     <div class="item">dddddddddddddddddddddddddddddddddddddddddd</div>
  20.     <div class="item">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
  21.     <div class="item">fffffffffffffffffffffffffffffffffffffffff</div>
  22.     <div class="item">gggggggggggggggggggggggggggggggggggggg</div>
  23.     <div class="item">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
  24.     <div class="item">iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
  25. </body>
  26. ..............

 2. 操控列

通过设置 grid-template-columns，大致分为三种形式

  • 不同列宽：grid-template-columns: 100px 200px 100px;  一个一个设置每一列的宽度，几个宽度即为几列

  • 相同列宽：grid-template-columns: repeat(3, 200px); 对于列宽相等的情况可以使用repeat函数，参数6为6列，200px为列宽

  • 自适应列宽：grid-template-columns: 1fr 1fr 1fr;  将父元素的空间瓜分为3份，每个子元素占据一份

 

 

  1.     .container {
  2.       display: grid;
  3.       /* 设置网格的列宽 */
  4.       grid-template-columns: 100px 200px 100px;
  5.       grid-template-columns: repeat(3, 200px);
  6.       grid-template-columns: 1fr 1fr 1fr;
  7.     }

 3. 操控行

通过设置 grid-template-row，基本同上

  • 不同行宽：grid-template-row: 100px 200px 100px

  • 相同行宽：grid-template-row: repeat(3, 200px)

  • 自适应列宽：grid-template-row: 1fr 1fr 1fr；由于我们没给父盒子加高度，所以父盒子的高度是由其子元素撑开的，故1fr即子元素累计高度的1/3，需要注意的是在没有设置子元素高度的时候，每个子元素的高度以最高的（内容最多的）那个子元素为准

 

 

  1.     .container {
  2.       display: grid;
  3.       grid-template-columns: 1fr 1fr 1fr;
  4.       /* 设置网格的行宽 */
  5.       grid-template-rows: 100px 200px 100px;
  6.       grid-template-rows: repeat(3, 100px);
  7.       grid-template-rows: 1fr 1fr 1fr;
  8.     }

4. 网格间隙

grid-gap: 20px(垂直方向) 10px(水平方向); 用于设置每个网格之间的间隙，是 grid-column-gap， grid-row-gap的简写形式

  1.     .container {
  2.       display: grid;
  3.       /* 设置网格的列宽 */
  4.       grid-template-columns: repeat(3, 150px);
  5.       grid-template-rows: 1fr 1fr 1fr;
  6.       grid-gap: 20px 10px;
  7.     }

 5. 基于线号放置元素

单单控制行和列往往是满足不了需求的。我们可以通过线号手动设置某个子元素的位置。

  • grid-column: grid-column-start/ grid-column-end;
  • grid-row: grid-column-end/ grid-row-end; 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  11.       display: grid;
  12.       grid-template-columns: repeat(3, 150px);
  13.       grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  14.       grid-gap: 20px 10px;
  15.     }
  16.  
  17.     .item {
  18.       background-color: orange;
  19.       word-break: break-all;
  20.     }
  21.  
  22.     .start {
  23.       grid-column: 1/4;
  24.       grid-row: 1/2;
  25.     }
  26.  
  27.     .end {
  28.       grid-column: 1/4;
  29.       grid-row: 4/5;
  30.     }
  31.   </style>
  32. </head>
  33.  
  34. <body>
  35.   <div class="container">
  36.     <div class="item start">我是header</div>
  37.     <div class="item">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  38.     <div class="item">ccccccccccccccccccccccccccccccccccccccccccccccc</div>
  39.     <div class="item">dddddddddddddddddddddddddddddddddddddddddd</div>
  40.     <div class="item">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
  41.     <div class="item">fffffffffffffffffffffffffffffffffffffffff</div>
  42.     <div class="item">gggggggggggggggggggggggggggggggggggggg</div>
  43.     <div class="item end">我是footer</div>
  44.   </div>
  45.  
  46. </body>
  47.  
  48. </html>

 6. 使用 grid-template-areas 属性放置元素

grid-template-areas 属性用于设置区域

给将要放置在区域内的元素设置 grid-area: areaname

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     #page {
  11.       display: grid;
  12.       grid-template-columns: 150px 1fr; 设置网格为两列，第一列150px，第二列自适应
  13.       grid-template-rows: 100px 500px 100px; 设置网格为三行，第一行150px，第二列500px，...
  14.       grid-template-areas: "header  header" 
  15.                  // 给这三行两列设置区域，第一行第一列是header，第一行第二列是header
  16.                            "nav  main"
  17.                  //                     第二行第一列是nav，第二行第二列是main
  18.                            "footer  footer";
  19.                  //                     第三行第一列是footer，第三行第二列是footer
  20.       grid-gap: 20px 10px;
  21.     }
  22.  
  23.     #page>header {
  24.       grid-area: header;
  25.       background-color: #8ca0ff;
  26.     }
  27.  
  28.     #page>nav {
  29.       grid-area: nav;
  30.       background-color: #ffa08c;
  31.     }
  32.  
  33.     #page>main {
  34.       grid-area: main;
  35.       background-color: #ffff64;
  36.     }
  37.  
  38.     #page>footer {
  39.       grid-area: footer;
  40.       background-color: #8cffa0;
  41.     }
  42.   </style>
  43. </head>
  44.  
  45. <body>
  46.   <section id="page">
  47.     <header>Header</header>
  48.     <nav>Navigation</nav>
  49.     <main>Main area</main>
  50.     <footer>Footer</footer>
  51.   </section>
  52.  
  53. </body>
  54.  
  55. </html>

 

​

 7. 控制元素如何排列

grid-auto-flow属性用于控制元素如何排列

  • row 逐行填充。

  • column 逐列填充

  • dense 填充空白

 

 

 可以看到 row 是从左至右逐行排列的，如果某个网格占据空间较大，可能会流白

column 是从上至下逐列排的

dense 可以填充留白的空间

总结

display: grid / inline-grid 开启网格布局

grid-template-column 控制列

grid-template-row 控制行

grid-gap 控制间隙

grid-column 控制元素占几列

grid-row 控制元素占几行

grid-template-area 设置网格区域 ，grid-area 设置元素占据哪个网格区域

grid-auto-flow 设置网格如何排列

详细信息查阅官网 网格布局 - CSS（层叠样式表） | MDN

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/295319
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号