search

博客列表 >grid的九个属性及其示例

grid的九个属性及其示例

P粉479712293
P粉479712293原创
2022年07月19日 01:31:21403浏览

题目1：创建grid容器

  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="../static/第10章/1创建grid容器.css">
  8.     <title>创建grid容器</title>
  9. </head>
  10. <body>
  11.     <div class="container"></div>
  12. </body>
  13. </html>

对应的css文件：

  1. .container{
  2.     width: 30em;
  3.     height: 30em;
  4.     background-color: wheat;
  5.     /* *创建grid容器 */
  6.     display:grid;
  7. }

效果图如下：

题目2：显式生成网格单元

  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="../static/第10章/2显式生成网格单元.css">
  8.     <title>显式生成网格单元</title>
  9. </head>
  10. <body>
  11.     <div class="container">
  13.     </div>
  14. </body>
  15. </html>

对应的css文件：

  1. .container{
  2.     width: 30em;
  3.     height: 30em;
  4.     background-color: wheat;
  5.     /* *创建grid容器 */
  6.     display:grid;
  7.     /* *画格子，划分网格单元 */
  8.     /* *3列，每列列宽10em */
  9.     /* grid-template-columns: 10em 10em 10em; */
  10.     /* *或以下 */
  11.     grid-template-columns: repeat(3, 10em);
  12.     /* *3行，每行行高10em */
  13.     /* grid-template-rows: 10em 10em 10em; */
  14.       /* *或以下 */
  15.       grid-template-rows: repeat(3, 10em);
  16. }

效果图如下：

题目3：将项目放入到指定的网格单元中

  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="../static/第10章/3将项目放入到指定的网格单元中.css">
  8.     <title>将项目放入到指定的网格单元中</title>
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <div class="item"></div>
  13.         <div class="item"></div>
  14.         <div class="item"></div>
  15.         <div class="item"></div>
  16.     </div>
  17. </body>
  18. </html>

对应的css文件：

  1. .container{
  2.     width: 30em;
  3.     height: 30em;
  4.     background-color: wheat;
  5.     /* *创建grid容器 */
  6.     display:grid;
  7.     /* *画格子，划分网格单元 */
  8.     /* *3列，每列列宽10em */
  9.     /* grid-template-columns: 10em 10em 10em; */
  10.     /* *或以下 */
  11.     grid-template-columns: repeat(3, 10em);
  12.     /* *3行，每行行高10em */
  13.     /* grid-template-rows: 10em 10em 10em; */
  14.       /* *或以下 */
  15.       grid-template-rows: repeat(3, 10em);
  16. }
  17. /* *将项目放到指定的网格单元中 */
  18. /* *项目一定要是容器的直接子元素 */
  19. .container>.item{
  20.     background-color: violet;
  21. /* *grid-area:行开始/列开始/行结束/列结束 */
  22.   grid-area:2/2/4/4;
  23. }

效果图如下：

题目4：行与列的排列规则

  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="../static/第10章/4行与列的排列规则.css">
  8.     <title>行与列的排列规则</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>
  18. </body>
  19. </html>

对应的css文件：

  1. .container{
  2.     width: 30em;
  3.     height: 30em;
  4.     background-color: wheat;
  5.     /* *创建grid容器 */
  6.     display:grid;
  7.     /* *画格子，划分网格单元 */
  8.     /* *3列，每列列宽10em */
  9.     /* grid-template-columns: 10em 10em 10em; */
  10.     /* *或以下 */
  11.     grid-template-columns: repeat(3, 10em);
  12.     /* *3行，每行行高10em */
  13.     /* grid-template-rows: 10em 10em 10em; */
  14.       /* *或以下 */
  15.       grid-template-rows: repeat(3, 10em);
  16.       /* *默认项目的排列方式是：行优先 水平方向*/
  17.       grid-auto-flow: row;
  18.      /* *项目的排列方式是：垂直方向 */
  19.      grid-auto-flow: column;
  20. }
  21. /* *将项目放到指定的网格单元中 */
  22. /* *项目一定要是容器的直接子元素 */
  23. .container>.item{
  24.     background-color: violet;
  26. }

效果图如下：

/ 默认项目的排列方式是：行优先 /
grid-auto-flow: row;

/ 项目的排列方式是：垂直方向 /
grid-auto-flow: column;

题目5：隐式网格行与列的大小

  1.  <div class="container">
  2.         <div class="item">1</div>
  3.         <div class="item">2</div>
  4.         <div class="item">3</div>
  5.         <div class="item">4</div>
  6.         <div class="item">5</div>
  7.         <div class="item">6</div>
  8.         <div class="item">7</div>
  9.         <div class="item">8</div>
  10.         <div class="item">9</div>
  11.         <div class="item">10</div>
  12.         <div class="item">11</div>
  13.     </div>

对应的css文件：

  1. .container{
  2.     width: 30em;
  3.     height: 30em;
  4.     background-color: wheat;
  5.     /* *创建grid容器 */
  6.     display:grid;
  7.     /* *画格子，划分网格单元 */
  8.     /* *3列，每列列宽10em */
  9.     /* grid-template-columns: 10em 10em 10em; */
  10.     /* *或以下 */
  11.     grid-template-columns: repeat(3, 10em);
  12.     /* *3行，每行行高10em */
  13.     /* grid-template-rows: 10em 10em 10em; */
  14.       /* *或以下 */
  15.       grid-template-rows: repeat(3, 10em);
  16.       /* *默认项目的排列方式是：行优先 */
  17.       grid-auto-flow: row;
  18.       /* *隐式网格自动生成行高 */
  19.       grid-auto-rows: 10em;
  20.       /* *项目的排列方式：列优先（垂直方向） */
  21.       grid-auto-flow: column;
  22.       grid-auto-columns: 10em;
  25. }
  26. /* *将项目放到指定的网格单元中 */
  27. /* *项目一定要是容器的直接子元素 */
  28. .container>.item{
  29.     background-color: violet;
  30.     width: 6em;
  31.     height: 6em;
  32. }

效果图如下：

体制外的项目行高只包住其项目
grid-auto-flow: row;

当设置行高时：
grid-auto-rows: 10em;

当垂直排列未设置列宽时：
grid-auto-flow: column;

当设置列宽时：
grid-auto-columns: 10em;

题目6：行列间隙

  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="../static/第10章/6行列间隙.css">
  8.     <title>行列间隙</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>

对应的css文件：

  1. .container{
  2.     width: 30em;
  3.     height: 30em;
  4.     background-color: wheat;
  5.     /* *创建grid容器 */
  6.     display:grid;
  7.     /* *画格子，划分网格单元 */
  8.     /* *3列，每列列宽10em */
  9.     /* grid-template-columns: 10em 10em 10em; */
  10.     /* *或以下 */
  11.     grid-template-columns: repeat(3, 10em);
  12.     /* *3行，每行行高10em */
  13.     /* grid-template-rows: 10em 10em 10em; */
  14.       /* *或以下 */
  15.       grid-template-rows: repeat(3, 10em);
  16.       /* *默认项目的排列方式是：行优先 */
  17.       grid-auto-flow: row;
  18.       /* *隐式网格自动生成行高 */
  19.       grid-auto-rows: 10em;
  20.      /* *gap:行间距 列间距 */
  21.      gap:10px;
  22. }
  23. /* *将项目放到指定的网格单元中 */
  24. /* *项目一定要是容器的直接子元素 */
  25. .container>.item{
  26.     background-color: violet;
  27. }

效果图如下：

题目7：项目在容器中的对齐方式

  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="../static/第10章/7项目在容器中的对齐方式.css">
  8.     <title>项目在容器中的对齐方式</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>

对应的css文件：

  1. .container{
  2.     width: 40em;
  3.     height: 50em;
  4.     background-color: wheat;
  5.     /* *创建grid容器 */
  6.     display:grid;
  7.     /* *画格子，划分网格单元 */
  8.     /* *3列，每列列宽10em */
  9.     /* grid-template-columns: 10em 10em 10em; */
  10.     /* *或以下 */
  11.     grid-template-columns: repeat(3, 10em);
  12.     /* *3行，每行行高10em */
  13.     /* grid-template-rows: 10em 10em 10em; */
  14.       /* *或以下 */
  15.       grid-template-rows: repeat(3, 10em);
  16.      /* *place-content:垂直方向 水平方向； */
  17.      place-content: start start;
  18.      place-content: center end;
  19.      place-content: center ;
  20.      /* *垂直方向两端对齐，水平方向分散对齐 */
  21.      place-content: space-between space-around;
  23. }
  24. /* *将项目放到指定的网格单元中 */
  25. /* *项目一定要是容器的直接子元素 */
  26. .container>.item{
  27.     background-color: violet;
  28.     width: 6em;
  29.     height: 6em;
  30. }

效果图如下：

开始方式：
place-content: start start;

垂直居中，水平向右
place-content: center end;

垂直与水平都居中
place-content: center ;

垂直方向两端对齐，水平方向分散对齐
place-content: space-between space-around;

题目8：项目在网格单元中的对齐方式

  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="../static/第10章/8项目在网格单元中的对齐方式.css">
  8.     <title>项目在网格单元中的对齐方式</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>

对应的css文件：

  1. .container{
  2.     width: 40em;
  3.     height: 50em;
  4.     background-color: wheat;
  5.     /* *创建grid容器 */
  6.     display:grid;
  7.     /* *画格子，划分网格单元 */
  8.     /* *3列，每列列宽10em */
  9.     /* grid-template-columns: 10em 10em 10em; */
  10.     /* *或以下 */
  11.     grid-template-columns: repeat(3, 10em);
  12.     /* *3行，每行行高10em */
  13.     /* grid-template-rows: 10em 10em 10em; */
  14.       /* *或以下 */
  15.       grid-template-rows: repeat(3, 10em);
  16.      /* *place-content:垂直方向 水平方向； */
  17.      place-content: start start;
  18.      place-content: center end;
  19.      place-content: center ;
  20.      /* *垂直方向两端对齐，水平方向分散对齐 */
  21.      place-content: space-between space-around;
  22.     /* *place-items:项目在“网格单元”中的对齐 */
  23.     /* *垂直开始 水平开始 */
  24.     place-items: start start;
  25.     /* *垂直居中 水平向右 */
  26.     place-items: center end;
  27.     /* *项目在容器中居中 */
  28.     place-content: center;
  29.     /* *项目在单元格中居中 */
  30.     place-items: center;
  31. }
  32. /* *将项目放到指定的网格单元中 */
  33. /* *项目一定要是容器的直接子元素 */
  34. .container>.item{
  35.     background-color: violet;
  36.     width: 6em;
  37.     height: 6em;
  38. }

效果图如下：

垂直开始 水平开始
place-items: start start;

垂直居中 水平向右
place-items: center end;

项目在容器中居中
place-content: center;

项目在单元格中居中
place-items: center;

题目9：某个项目在网格单元中的对齐

  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="../static/第10章/9某个项目在网格单元中的对齐.css">
  8.     <title>某个项目在网格单元中的对齐</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>

对应的css文件：

  1. .container{
  2.     width: 40em;
  3.     height: 50em;
  4.     background-color: wheat;
  5.     /* *创建grid容器 */
  6.     display:grid;
  7.     /* *画格子，划分网格单元 */
  8.     /* *3列，每列列宽10em */
  9.     /* grid-template-columns: 10em 10em 10em; */
  10.     /* *或以下 */
  11.     grid-template-columns: repeat(3, 10em);
  12.     /* *3行，每行行高10em */
  13.     /* grid-template-rows: 10em 10em 10em; */
  14.       /* *或以下 */
  15.       grid-template-rows: repeat(3, 10em);
  16.      /* *place-content:垂直方向 水平方向； */
  17.      place-content: start start;
  18.      place-content: center end;
  19.      place-content: center ;
  20.      /* *垂直方向两端对齐，水平方向分散对齐 */
  21.      place-content: space-between space-around;
  22.     /* *place-items:项目在“网格单元”中的对齐 */
  23.     /* *垂直开始 水平开始 */
  24.     place-items: start start;
  25.     /* *垂直居中 水平向右 */
  26.     place-items: center end;
  27.     /* *项目在容器中居中 */
  28.     place-content: center;
  29.     /* *项目在单元格中居中 */
  30.     place-items: center;
  31. }
  32. /* *将项目放到指定的网格单元中 */
  33. /* *项目一定要是容器的直接子元素 */
  34. .container>.item{
  35.     background-color: violet;
  36.     width: 6em;
  37.     height: 6em;
  38. }
  39. .container>.item:nth-of-type(5){
  40.     background-color: green;
  41.     /* *设置某个项目的对齐方式（垂直向下 水平向右） */
  42.     place-self:end end;
  43. }

效果图如下：

设置某个项目的对齐方式（垂直向下 水平向右）
place-self:end end;

上一条：模仿苏X易购手机主页布局下一条：仿制淘宝移动端首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多