Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid布局及简写
Blogger Information
Blog 26
fans 0
comment 0
visits 21458
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布局及简写
default
Original
1898 people have browsed it

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>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：grid属性太多了, 可以先从最基本的, 最常用的几个先入手
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