Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局常用属性
Blogger Information
Blog 29
fans 1
comment 0
visits 14974
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
grid布局常用属性
Pharaoh
Original
1051 people have browsed it

容器属性

  • display:grid：指定容器采用网格布局
  • grid-template-rows：定义行和行高
  • grid-template-columns：定义列和列宽
  • grid-auto-rows：设置多余项目网格的行高
  • grid-auto-columns：设置多余项目网格的列宽
  • repeat()：重复列或行的参数，例如: grid-template-rows:repeat(3,1fr)
  • grid-auto-flow：设置网格布局排列，属性除了设置成 row 和 column，还可以设成 row dense 和 column dense，dense主要用于某些项目指定位置以后，剩下的项目怎么自动放置
  • grid-template-areas：用于自定义区域
  • gap/grid-gap：设置行和列的间距，grid-column-gap 和 grid-row-gap 的简写形式
  • place-content：是 align-content 属性和 justify-content 属性的简写形式，设置项目整体在容器内的位置
  • place-items：是 align-items 属性和 justify-items 属性的简写形式，设置项目在单元格内的位置

项目属性

  • grid-row：grid-row-start属性和grid-row-end的简写形式
  • grid-column：是grid-column-start和grid-column-end的简写形式
  • grid-area：指定项目放在哪一个区域
  • place-self：是align-self属性和justify-self属性的简写形式

常用属性实例

grid-template-rows和grid-template-columns

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="grid.css" />
  8.     <title>flex布局</title>
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="item">1</div>
  13.       <div class="item">2</div>
  14.       <div class="item">3</div>
  15.       <div class="item">4</div>
  16.       <div class="item">5</div>
  17.       <div class="item">6</div>
  18.       <div class="item">7</div>
  19.       <div class="item">8</div>
  20.       <div class="item">9</div>
  21.     </div>
  22.   </body>
  23. </html>
  25. /* CSS文件 */
  26. .container {
  27.   width: 300px;
  28.   height: 300px;
  29.   display: grid;
  30.   /* 设置3列，宽度80像素 */
  31.   grid-template-columns: repeat(3, 80px);
  32.   /* 设置3行，高度80px */
  33.   grid-template-rows: repeat(3, 80px);
  34. }
  36. .item {
  37.   background-color: cornflowerblue;
  38. }

grid-auto-flow

HTML文件同上

  1. /* CSS文件 */
  2. .container {
  3.   width: 300px;
  4.   height: 300px;
  5.   display: grid;
  6.   /* 设置3列，宽度80像素 */
  7.   grid-template-columns: repeat(3, 80px);
  8.   /* 设置3行，高度80px */
  9.   grid-template-rows: repeat(3, 80px);
  10.   /* 改变排列方式 垂直排列 */
  11.   grid-auto-flow: column;
  12. }
  14. .item {
  15.   background-color: cornflowerblue;
  16. }

grid-auto-columns和grid-auto-rows

这两个属性设置多出来的项目的单元格大小

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="grid.css" />
  8.     <title>flex布局</title>
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="item">1</div>
  13.       <div class="item">2</div>
  14.       <div class="item">3</div>
  15.       <div class="item">4</div>
  16.       <div class="item">5</div>
  17.       <div class="item">6</div>
  18.       <div class="item">7</div>
  19.       <div class="item">8</div>
  20.       <div class="item">9</div>
  21.       <div class="item">10</div>
  22.       <div class="item">11</div>
  23.     </div>
  24.   </body>
  25. </html>
  27. /* CSS文件 */
  28. .container {
  29.   width: 300px;
  30.   height: 300px;
  31.   display: grid;
  32.   /* 设置3列，宽度80像素 */
  33.   grid-template-columns: repeat(3, 80px);
  34.   /* 设置3行，高度80px */
  35.   grid-template-rows: repeat(3, 80px);
  36.   /* 设置多出来项目的单元格大小 */
  37.   grid-auto-rows: 80px;
  38. }
  40. .item {
  41.   background-color: cornflowerblue;
  42. }

10和11是多出来的项目，通过设置他的单元格大小和1-9的一样

gap

设置单元格之间的边距

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="grid.css" />
  8.     <title>flex布局</title>
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="item">1</div>
  13.       <div class="item">2</div>
  14.       <div class="item">3</div>
  15.       <div class="item">4</div>
  16.       <div class="item">5</div>
  17.       <div class="item">6</div>
  18.       <div class="item">7</div>
  19.       <div class="item">8</div>
  20.       <div class="item">9</div>
  21.     </div>
  22.   </body>
  23. </html>
  25. /* CSS文件 */
  26. .container {
  27.   width: 300px;
  28.   height: 300px;
  29.   display: grid;
  30.   /* 设置3列，宽度80像素 */
  31.   grid-template-columns: repeat(3, 80px);
  32.   /* 设置3行，高度80px */
  33.   grid-template-rows: repeat(3, 80px);
  34.   /* 设置单元格之间的边距 */
  35.   gap: 5px 5px;
  36. }
  38. .item {
  39.   background-color: cornflowerblue;
  40. }

place-items和place-content

其实就是分配剩余空间，没有空间就没有办法分配
place-item是设置项目在单元格内的位置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="grid.css" />
  8.     <title>flex布局</title>
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="item">1</div>
  13.       <div class="item">2</div>
  14.       <div class="item">3</div>
  15.       <div class="item">4</div>
  16.       <div class="item">5</div>
  17.       <div class="item">6</div>
  18.       <div class="item">7</div>
  19.       <div class="item">8</div>
  20.       <div class="item">9</div>
  21.     </div>
  22.   </body>
  23. </html>
  25. /* CSS文件 */
  26. .container {
  27.   width: 300px;
  28.   height: 300px;
  29.   display: grid;
  30.   /* 设置3列，宽度80像素 */
  31.   grid-template-columns: repeat(3, 80px);
  32.   /* 设置3行，高度80px */
  33.   grid-template-rows: repeat(3, 80px);
  34.   /* 设置单元格之间的边距 */
  35.   gap: 5px 5px;
  36.   /* 项目在单元格内的定位 */
  37.   place-items: center end;
  38. }
  40. .item {
  41.   background-color: cornflowerblue;
  42.   width: 40px;
  43.   height: 40px;
  44. }

place-content设置是把容器内所有项目单元格看成一个整体，进行分配

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="grid.css" />
  8.     <title>flex布局</title>
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="item">1</div>
  13.       <div class="item">2</div>
  14.       <div class="item">3</div>
  15.       <div class="item">4</div>
  16.       <div class="item">5</div>
  17.       <div class="item">6</div>
  18.       <div class="item">7</div>
  19.       <div class="item">8</div>
  20.       <div class="item">9</div>
  21.     </div>
  22.   </body>
  23. </html>
  24. /* CSS文件 */
  25. .container {
  26.   width: 300px;
  27.   height: 300px;
  28.   outline: 1px solid #afafaf;
  29.   display: grid;
  30.   /* 设置3列，宽度80像素 */
  31.   grid-template-columns: repeat(3, 80px);
  32.   /* 设置3行，高度80px */
  33.   grid-template-rows: repeat(3, 80px);
  34.   /* 项目在单元格内的定位 */
  35.   place-items: center;
  36.   /* 项目整体在容器中的定位 */
  37.   place-content: end center;
  38. }
  40. .item {
  41.   background-color: cornflowerblue;
  42.   width: 40px;
  43.   height: 40px;
  44. }

grid-area

设置项目在网格中的大小和位置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="grid.css" />
  8.     <title>flex布局</title>
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="item">1</div>
  13.     </div>
  14.   </body>
  15. </html>
  17. /* CSS文件 */
  18. .container {
  19.   width: 300px;
  20.   height: 300px;
  21.   display: grid;
  22.   /* 设置3列，宽度80像素 */
  23.   grid-template-columns: repeat(3, 80px);
  24.   /* 设置3行，高度80px */
  25.   grid-template-rows: repeat(3, 80px);
  26. }
  28. .item {
  29.   background-color: cornflowerblue;
  30.   /* 设置项目在网格中的大小和位置 */
  31.   /* grid-area:行起点 / 列起点 / 行终点 / 列终点*/
  32.   grid-area: 2 / 2 / 4 / 4;
  33. }

Correcting teacher：PHPzPHPz

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