search

博客列表 >grid布局常用属性

grid布局常用属性

Pharaoh
Pharaoh原创
2022年07月13日 23:57:471050浏览

容器属性

  • 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. }

上一条：弹性盒子flex重要属性详解下一条：flex常用的6个属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多