search

博客列表 >grid布局及简写

grid布局及简写

default
default原创
2020年04月14日 17:38:571918浏览

grid 简单用法

  • grid-template-rows: 100px 100px 100px; 这个是grid的横向布局
  • grid-template-columns: 100px 100px 100px; 这个是grid的纵向布局
  • grid-template-columns: repeat(3,1fr); repeat(3,1fr)里面有两个参数 第一个是复制几次 第二个是占几份 当然也可以写auto 自动分配比例
  • grid-template-rows: repeat(3,1fr); 这是横向 原理同上
  • 发现一个简写办法 grid-template: repeat(3,1fr)/ repeat(3,1fr); 用斜线隔开 第一个是横向 第二个是纵向
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .con{
  8.             width: 400px;
  9.             height: 400px;
  10.             background: lightblue;
  11.             display: grid;
  12.             grid-template-rows: 100px 100px 100px;
  13.             grid-template-columns: 100px 100px 100px;
  14.             grid-template: repeat(3,1fr)/ repeat(3,1fr);
  15.             border: 1px solid #ddd;
  16.             gap: 1px 10px;
  17.         }
  18.         .items{
  19.             border: 1px solid #ddd;
  20.             background: #dddddd;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  26. <div class="con">
  27.     <div class=" items items1">1</div>
  28.     <div class=" items items2">2</div>
  29.     <div class=" items items3">3</div>
  30.     <div class=" items items4">4</div>
  31.     <div class=" items items5">5</div>
  32.     <div class=" items items6">6</div>
  33.     <div class=" items items7">7</div>
  34.     <div class=" items items8">8</div>
  35.     <div class=" items items9">9</div>
  36. </div>
  37. </body>
  38. </html>

grid 的多参数写法

  • 这边用简写 grid-template: 100px 100px 100px / 100px 100px 100px; 可以用px写
  • grid-template: 20% 40% auto /100px auto 100px; 可以用百分比和px，auto 混搭
  • grid-template: 1fr 1fr 2fr/1fr 1fr 1fr; 按照比例写
  • grid-template:repeat(3,1fr)/repeat(3,1fr) ;可以用重复的办法写
  • grid-template:repeat(1,50px 100px 10px 30px 40px)/repeat(3,1fr) ;分组来填写
  • grid-template: repeat(2,minmax(50px ,100px)) /repeat(3,minmax(150px,1fr));弹性设置 第一个参数是最小值 第二是最大值 适用于手机

  • grid-template:repeat(auto-fill,100px)/repeat(auto-fill,100px) ;auto-fill 自动填充

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>设置单元格的数量和大小</title>
    6.  <style>
    7.      .con{
    8.          width: 400px;
    9.          height: 400px;
    10.          background: darkcyan;
    12.          display: grid;
    13.         /*固定值*/
    14.          /*grid-template-columns: 100px 100px 100px;*/
    15.          /*grid-template-rows:100px 100px 100px;*/
    16.          /*!*百分比*!*/
    17.          /*grid-template-columns: 20% 40% auto;*/
    18.          /*grid-template-rows:100px auto 100px;*/
    20.          /*!*按比例*!*/
    21.          /*grid-template-columns: 1fr 1fr 2fr;*/
    22.          /*grid-template-rows:1fr 1fr 1fr;*/
    23.          /*!*重复设置*!*/
    24.          /*grid-template-columns: repeat(3,1fr) ;*/
    25.          /*grid-template-rows:repeat(3,1fr);*/
    26.          /*按分组来设置*/
    27.          /*grid-template-columns: repeat(1,50px 100px 10px 30px 40px) ;*/
    28.          /*grid-template-rows:repeat(3,1fr);*/
    29.          /*弹性设置*/
    30.          /*grid-template-columns:repeat(2,minmax(50px ,100px));*/
    31.          /*grid-template-rows:repeat(3,minmax(150px ,1fr));*/
    33.          /*自动填充 auto-fill*/
    34.          grid-template-columns:repeat(auto-fill,100px);
    35.          grid-template-rows:repeat(auto-fill,100px);
    36.      }
    38.      .item{
    39.          font-size: 2rem;
    40.          background: lightgreen;
    41.      }
    42.  </style>
    43. </head>
    44. <body>
    45. <div class="con">
    46.  <div class="item">1</div>
    47.  <div class="item">2</div>
    48.  <div class="item">3</div>
    49.  <div class="item">4</div>
    50.  <div class="item">5</div>
    51.  <div class="item">6</div>
    52.  <div class="item">7</div>
    53. </div>
    54. </body>
    55. </html>

    使用默认网格线来划分单元格

  • grid-row-start: 1; grid-row-end: 3; grid-column-end: 1;grid-column-start: 3; 操作子元素的操作办法
  • grid-row: 1/3; grid-column: 3/5;简写
  • grid-row: 3/span 2; grid-column: 1/span 2; 使用偏移量 span 是隔几个
  • grid-row-end: span 2; grid-column-end: span 2; 用偏移量 省去代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .con{
  8.             width: 400px;
  9.             height: 400px;
  10.             background: lightblue;
  11.             display: grid;
  12.             /*!*grid-template-rows: 100px 100px 100px;*!*/
  13.             /*!*grid-template-columns: 100px 100px 100px;*!*/
  14.             /*grid-template-columns: repeat(3,auto);*/
  15.             /*grid-template-rows: repeat(3,1fr);*/
  16.             grid-template: repeat(4,1fr)/ repeat(4,1fr);
  18.             gap: 1px 1px;
  19.         }
  20.         .items{
  21.             border: 1px solid #ddd;
  22.             background: #dddddd;
  23.         }
  24.         .items1{
  25.             background: lightgreen;
  26.             grid-row-start: 1;
  27.             grid-row-end: 3;
  28.             grid-column-start: 1;
  29.             grid-column-end: 3;
  34.         }
  35.         .items2{
  36.             background: lightpink;
  37.             grid-row: 1/3;
  38.             grid-column: 3/5;
  39.         }
  40.         .items3{
  41.             background: lightyellow;
  42.             grid-row: 3/span 2;
  43.             grid-column: 1/span 2;
  44.         }
  45.         .items4{
  46.             background: lightcoral;
  47.             grid-row-end: span 2;
  48.             grid-column-end: span 2;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  54. <div class="con">
  55.     <div class=" items items1">1</div>
  56.     <div class=" items items2">2</div>
  57.     <div class=" items items3">3</div>
  58.     <div class=" items items4">4</div>
  59.     <!--<div class=" items items5">5</div>-->
  60.     <!--<div class=" items items6">6</div>-->
  61.     <!--<div class=" items items7">7</div>-->
  62.     <!--<div class=" items items8">8</div>-->
  63.     <!--<div class=" items items9">9</div>-->
  64. </div>
  65. </body>
  66. </html>

设置命名网格区域

  • grid-template-areas: “header header header””left main right” “footer footer footer”;
  • 在子元素 grid-area: header; 用来命名子元素
  • 简写就是 grid-template-areas: “header header header””…” “footer footer footer”;因为在中间这个本身就是自然分配所以可以用点点点来显示然后 在子元素grid-area: left;删掉即可
  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .con{
  8.             width: 400px;
  9.             height: 400px;
  10.             background: lightblue;
  11.             display: grid;
  12.             grid-template: 80px auto 80px/ 40px auto 40px;
  13.             grid-template-areas: "header header header"
  14.             "left main right"
  15.             "footer footer footer";
  16.             gap: 1px 1px;
  17.         }
  18.         .items{
  19.             border: 1px solid #ddd;
  20.             background: #dddddd;
  21.         }
  22.         .items1{
  23.             background: lightgreen;
  24.             grid-area: header;
  25.         }
  26.         .items2{
  27.             background: lightpink;
  28.             grid-area: left;
  30.         }
  31.         .items3{
  32.             background: lightyellow;
  33.             grid-area: main;
  34.         }
  35.         .items4{
  36.             background: lightcoral;
  37.             grid-area:right ;
  38.         }
  39.         .items5{
  40.             background: lavender;
  41.             grid-area: footer;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  47. <div class="con">
  48.     <div class=" items items1">1</div>
  49.     <div class=" items items2">2</div>
  50.     <div class=" items items3">3</div>
  51.     <div class=" items items4">4</div>
  52.     <div class=" items items5">5</div>
  53.     <!--<div class=" items items6">6</div>-->
  54.     <!--<div class=" items items7">7</div>-->
  55.     <!--<div class=" items items8">8</div>-->
  56.     <!--<div class=" items items9">9</div>-->
  57. </div>
  58. </body>
  59. </html>

子元素在容器中的对齐方式

  • 和felx 差不多行的使用方式
    justify-content: end;
    justify-content: start;
    justify-content: center;
    justify-content: space-between;
    align-content: end;
    align-content: start;
    align-content: center;
    align-content: space-between;

    简写方式为
    /place-content: 垂直对齐 水平对齐;/
    place-content: center start;

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>设置单元格在容器中的对齐方式</title>
    6.   <style>
    7.       .con{
    8.           width: 400px;
    9.           height: 400px;
    10.           background: darkcyan;
    11.           display: grid;
    12.           grid-template-columns: repeat(3,50px);
    13.           grid-template-rows:repeat(3,50px);
    14.           justify-content: end;
    15.           justify-content: start;
    16.           align-content: end;
    17.           align-content: start;
    18.           align-content: center;
    19.           justify-content: center;
    20.           justify-content: space-between;
    21.           align-content: space-between;
    22.           grid-template-columns: repeat(3,auto);
    23.           align-content: stretch;
    24.           /*简写*/
    25.           /*place-content: 垂直对齐 水平对齐;*/
    26.           place-content: center start;
    27.       }
    28.       .item{
    29.           font-size: 2rem;
    30.           background: lightgreen;
    31.       }
    33.   </style>
    34. </head>
    35. <body>
    36. <div class="con">
    37.   <div class="item item1">1</div>
    38.   <div class="item item2">2</div>
    39.   <div class="item item3">3</div>
    40.   <div class="item item4">4</div>
    41.   <div class="item item5">5</div>
    42.   <div class="item item6">6</div>
    43.   <div class="item item7">7</div>
    44.   <div class="item item8">8</div>
    45.   <div class="item item9">9</div>
    46. </div>
    47. </body>
    48. </html>

    子元素在容器中的对齐方式

  • place-items: center end; 操纵所有子元素的方法

  • justify-items: stretch; align-items: stretch; justify-content: start; align-items: center; 这些方法使用方式和flex一样 写法不同而已

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>设置项目在单元格中的对齐方式</title>
    6.  <style>
    7.      .con{
    8.          width: 400px;
    9.          height: 400px;
    10.          background: darkcyan;
    12.          display: grid;
    13.          grid-template-columns: repeat(3,1fr);
    14.          grid-template-rows:repeat(3,1fr);
    15.          /*justify-items: stretch;*/
    16.          /*align-items: stretch;*/
    17.          /*justify-content: start;*/
    18.          /*align-items: center;*/
    19.          place-items: center end;
    20.      }
    22.      .item{
    23.          width: 50px;
    24.          height: 50px;
    25.          font-size: 2rem;
    26.          background: lightgreen;
    27.      }
    29.  </style>
    30. </head>
    31. <body>
    32. <div class="con">
    33.  <div class="item item1">1</div>
    34.  <div class="item item2">2</div>
    35.  <div class="item item3">3</div>
    36.  <div class="item item4">4</div>
    37.  <div class="item item5">5</div>
    38.  <div class="item item6">6</div>
    39.  <div class="item item7">7</div>
    40.  <div class="item item8">8</div>
    41.  <div class="item item9">9</div>
    42. </div>
    43. </body>
    44. </html>

    设置某个项目在单元格中的对齐方式

  • justify-self: end; align-self: center; 单独子元素的排列方式

  • place-self: center; 简写

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>设置某个项目在单元格中的对齐方式</title>
    6.   <style>
    7.       .con{
    8.           width: 400px;
    9.           height: 400px;
    10.           background: darkcyan;
    11.           display: grid;
    12.           grid-template-columns: repeat(3,1fr);
    13.           grid-template-rows:repeat(3,1fr);
    14.       }
    16.       .item{
    17.           width: 50px;
    18.           height: 50px;
    19.           font-size: 2rem;
    20.           background: lightgreen;
    21.       }
    22.       .item5{
    23.           justify-self: end;
    24.           align-self: center;
    25.           /*简写*/
    26.           place-self: center;
    27.       }
    29.   </style>
    30. </head>
    31. <body>
    32. <div class="con">
    33.   <div class="item item1">1</div>
    34.   <div class="item item2">2</div>
    35.   <div class="item item3">3</div>
    36.   <div class="item item4">4</div>
    37.   <div class="item item5">5</div>
    38.   <div class="item item6">6</div>
    39.   <div class="item item7">7</div>
    40.   <div class="item item8">8</div>
    41.   <div class="item item9">9</div>
    42. </div>
    43. </body>
    44. </html>

    grid的间距

  • 用gap就行很简单
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>设置某个项目在单元格中的对齐方式</title>
    <style>

    1.   .con{
    2.       width: 400px;
    3.       height: 400px;
    4.       background: darkcyan;
    5.       display: grid;
    6.       grid-template-columns: repeat(3,1fr);
    7.       grid-template-rows:repeat(3,1fr);
    8.       /*列间距*/
    9.       column-gap: 5px;
    10.       /*行间距*/
    11.       row-gap: 5px;
    12.       /*简写*/
    13.       gap: 5px 10px;
    14.       /*超级简写*/
    15.       gap: 5px;
    16.   }
    18.   .item{
    20.       font-size: 2rem;
    21.       background: lightgreen;
    22.   }
  1. </style>

</head>

<body>

<div class="con">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
</div>
</body>
</html>

上一条：html基础知识学习利用grid网格布局简短代码实现圣杯布局下一条：Grid-网格布局思路和基础知识总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多