devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

grid布局使用总结_grid-template-columns

作者：羊村懒王 | 2024-03-23 13:00:30

赞

踩

grid-template-columns

css 一直是用来页面布局的  早期我们使用table来布局  后面又有了浮动  定位  但这些本质上都是hack模式 并且都没有垂直居中的功能  CSS3里面有了伸缩盒子  一定程度上解决了这些问题  但它更适用于一维布局  在我们实际开发中  往往是复杂的二维布局  Grid布局就是为了解决复杂布局模块而生的CSS模块  

grid布局  简单来所也是网格布局  由以下属性组成

网格容器: 所以网格项加起来之和  是网格单元之父

网格单元: 相邻的列网格线和行网格线组成的网格单元  也即使最小的网格单元

网格项: 也就是网格中的一个个格子   网格单元

网格区: 任意的网格单元的组合

网格线: 横向网格线和竖直网格线

网格轨道: 相邻网格线之间的距离

父元素属性：

属性说明
display设置grid布局
grid-template-rows设置网格的行数
grid-template-columns设置网格的列数
grid-template-areas网格单元重命名
grid-column-gap列网格轨道的大小
grid-row-gap行网格轨道的大小
grid-gapgrid-row-gap和grid-column-gap 缩写
justify-items所有的网格单元在X轴的对齐方式
align-items所有的网格单元在Y轴的对齐方式
place-itemX轴和Y轴对齐方式缩写
justify-content所有的网格单元在X轴的排列方式
align-content所有的网格单元在Y轴的排列方式
grid-auto-columns设置网格容器中列的尺寸
grid-auto-rows设置网格容器中行的尺寸
grid-auto-flow布局时候  控制网格的排列方向
  1. // 有几个值表示有几列  单位可以是px 也可以百分比  fr表示在剩余的空间里面等比分配 
  2. grid-template-columns:100px 10% 1fr 2fr  
  3. // 这里的c表示网格单元的别名
  4. grid-template-columns: [c1] 200px [c2] 200px [c3] 1fr [c4] 
  5. //表示创建12个大小相等的列
  6. grid-template-columns:repeat(12 1fr)
  7. // auto-fit 自适应  尽量用100px来填满网格
  8. grid-template-columns: repeat(auto-fit, 100px)
  9. //当大小小于100的时候  用最小单位100px   大于100px的时候  平均分配
  10. grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))

justify-items 属性值

start网格中的左端对齐
center网格中的居中对齐
end网格中的右端对齐
stretch网格中的内容宽度占满整个空间

align-items 与 justify-items 属性值一样

justify-content 属性值

startX轴上左端对齐
centerX轴上居中对齐
endX轴上右端对齐
stretchX轴上内容宽度占满整个空间
space-aroundX轴上中间是两端的两倍
space-betweenX轴上两端对齐 中间平分
space-evenlyX轴上每一列的间距相同

grid-auto-flow:

column网格从上向下排列
row网格从左向右排列

相关案例代码

  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.   <title>Document</title>
  8.   <style>
  9.     .item{
  10.       border: 1px solid #ccc;
  11.       border-radius: 10px;
  12.     }
  13.     .item-column{
  14.       height: 100px;
  15.       margin-bottom: 20px;
  16.     }
  17.     .item-row{
  18.       width: 100px;
  19.     }
  20.     .item1{
  21.       grid-row: 1 / 3;
  22.       background: rgba(232, 140, 217, 0.5);
  23.     }
  24.     .item2{
  25.       grid-column: 1 / 3;
  26.       background: rgba(232, 140, 217, 0.5);
  27.     }
  28.     .column{
  29.       display: grid;
  30.       grid-template-columns: 100px 100px 1fr 1fr;
  31.       grid-column-gap: 10px;
  32.     }
  33.     .column2{
  34.       display: grid;
  35.       grid-template-columns: repeat(6, 150px);
  36.       grid-column-gap: 10px;
  37.       border: 1px solid #ccc;
  38.       padding: 10px;
  39.       align-items: center;
  40.     }
  41.     .column3{
  42.       display: grid;
  43.       grid-template-columns:150px 150px 150px;
  44.       grid-template-rows: 150px  150px 150px;
  45.       grid-column-gap: 10px;
  46.     }
  47.     .column4{
  48.       display: grid;
  49.       grid-auto-columns: 300px;
  50.       background: #2196F3;
  51.       height: 240px;
  52.       padding: 20px;
  53.       grid-column-gap: 10px;
  54.     }
  55.     .column5{
  56.       display: grid;
  57.       grid-template: auto auto / auto auto;
  58.       grid-auto-flow:column;
  59.     }
  60.     .row0{
  61.       display: grid;
  62.       place-items: center;
  63.     }
  64.     .row{
  65.       display: grid;
  66.       grid-template-rows: 100px 1fr 20%;
  67.       grid-row-gap: 10px;
  68.     }
  69.     .row2{
  70.       display: grid;
  71.       grid-template-rows: 100px 1fr 20%;
  72.       grid-template-columns: 1fr 1fr;
  73.       grid-row-gap: 10px;
  74.       justify-items: center;
  75.     }
  76.     .row3{
  77.       display: grid;
  78.       grid-template-rows: 100px 1fr 20%;
  79.       grid-template-columns: 150px 150px 150px;
  80.       grid-row-gap: 10px;
  81.       justify-content: space-around;
  82.     }
  83.     .row4{
  84.       display: grid;
  85.       grid-auto-rows:100px;
  86.     }
  87.     .row5{
  88.       display: grid;
  89.       grid-template: auto auto / auto auto;
  90.       grid-auto-flow:row;
  91.     }
  92.   </style>
  93. </head>
  94. <body>
  95.   <h1>竖直排列</h1>
  96.   <div class="column">
  97.     <div class="item item-column">11</div>
  98.     <div class="item item-column">22</div>
  99.     <div class="item item-column">33</div>
  100.     <div class="item item-column">44</div>
  101.   </div>
  102.   <h1>align-items</h1>
  103.   <div class="column2">
  104.     <div class="item item-column item1">11</div>
  105.     <div class="item item-column">22</div>
  106.     <div class="item item-column">33</div>
  107.     <div class="item item-column">44</div>
  108.     <div class="item item-column">55</div>
  109.     <div class="item item-column">66</div>
  110.     <div class="item item-column">77</div>
  111.   </div>
  112.   <h1>align-content</h1>
  113.   <div class="column3">
  114.     <div class="item item-column">11</div>
  115.     <div class="item item-column">22</div>
  116.     <div class="item item-column">33</div>
  117.     <div class="item item-column">44</div>
  118.     <div class="item item-column">55</div>
  119.   </div>
  120.   <h1>grid-auto-columns</h1>
  121.   <div class="column4">
  122.     <div class="item">11</div>
  123.     <div class="item">22</div>
  124.     <div class="item">33</div>
  125.     <div class="item">44</div>
  126.   </div>
  127.   <h1>grid-auto-flow</h1>
  128.   <div class="column5">
  129.     <div class="item">11</div>
  130.     <div class="item">22</div>
  131.     <div class="item">33</div>
  132.     <div class="item">44</div>
  133.   </div>
  134.   <h1>place-item</h1>
  135.   <div class="row0">
  136.     <div class="item">11</div>
  137.     <div class="item">22</div>
  138.     <div class="item">33</div>
  139.     <div class="item">44</div>
  140.   </div>
  141.  <h1>横向排列</h1>
  142.   <div class="row">
  143.     <div class="item">55</div>
  144.     <div class="item">66</div>
  145.     <div class="item">77</div>
  146.   </div>
  147.   <h1>justify-items</h1>
  148.   <div class="row2">
  149.     <div class="item item-row">11</div>
  150.     <div class="item item-row">22</div>
  151.     <div class="item item-row">33</div>
  152.     <div class="item item-row">44</div>
  153.     <div class="item item-row">55</div>
  154.   </div>
  155.   <h1>justify-content</h1>
  156.   <div class="row3">
  157.     <div class="item item2 item-row">11</div>
  158.     <div class="item">22</div>
  159.     <div class="item">33</div>
  160.     <div class="item">44</div>
  161.     <div class="item">55</div>
  162.     <div class="item">66</div>
  163.     <div class="item">77</div>
  164.   </div>
  165.   <h1>grid-auto-rows</h1>
  166.   <div class="row4"> 
  167.     <div class="item">11</div>
  168.     <div class="item">22</div>
  169.     <div class="item">33</div>
  170.     <div class="item">44</div>
  171.   </div>
  172.   <h1>grid-auto-flow</h1>
  173.   <div class="row5">
  174.     <div class="item">11</div>
  175.     <div class="item">22</div>
  176.     <div class="item">33</div>
  177.     <div class="item">44</div>
  178.   </div>
  179. </body>
  180. </html>

grid-column-start 和 grid-row-start  可以分别指定  从竖直方向 和  横向方向  从第几个网格开始排列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     #grid {
  11.       height: 200px;
  12.       width: 200px;
  13.       display: grid;
  14.       grid-gap: 10px;
  15.       grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  16.       grid-auto-flow: column;
  17.       border: 1px solid red
  18.     }
  19.  
  20.     #item1 {
  21.       background-color: lime;
  22.       grid-row-start: 3;
  23.     }
  24.  
  25.     #item2 {
  26.       background-color: yellow;
  27.     }
  28.  
  29.     #item3 {
  30.       background-color: blue;
  31.     }
  32.  
  33.     #item4 {
  34.       grid-column-start: 2;
  35.       background-color: red;
  36.     }
  37.  
  38.     #item5 {
  39.       background-color: aqua;
  40.     }
  41.   </style>
  42. </head>
  43.  
  44. <body>
  45.   <div id="grid">
  46.     <div id="item1">1</div>
  47.     <div id="item2">2</div>
  48.     <div id="item3">3</div>
  49.     <div id="item4">4</div>
  50.     <div id="item5">5</div>
  51.   </div>
  52.  
  53. </body>
  54.  
  55. </html>

grid-area  可以对网格进行重命名  从而可以随意改变该网格在网格容器中的位置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     main {
  11.       display: grid;
  12.       grid-template-columns: 10rem auto;
  13.       grid-template-rows: auto auto 1fr auto;
  14.       grid-template-areas: "header header" "title article" "nav article" "footer footer";
  15.     }
  16.  
  17.     header {
  18.       grid-area: header;
  19.       background: lightblue;
  20.     }
  21.  
  22.     div {
  23.       grid-area: title;
  24.       background: orange;
  25.     }
  26.  
  27.     nav {
  28.       grid-area: nav;
  29.       background: pink;
  30.     }
  31.  
  32.     article {
  33.       grid-area: article;
  34.       background: yellow;
  35.     }
  36.  
  37.     footer {
  38.       grid-area: footer;
  39.       background: lightblue;
  40.     }
  41.  
  42.     .box {
  43.       background-color: #999;
  44.       display: grid;
  45.       grid-template-columns: 100px 80% 1fr 1fr;
  46.       grid-template-rows: 200px 300px 300px;
  47.       grid-template-areas: "header header header ."
  48.         "main main . sidebar"
  49.         "footer footer footer footer"
  50.         /*名字便是元素的名字，点(.)代表的意思是空一格，这个单元格中不放内容*/
  51.     }
  52.  
  53.     .a {
  54.       grid-area: header;
  55.       /*grid-area:;   是给子元素起一个名字*/
  56.       background-color: red;
  57.     }
  58.  
  59.     .b {
  60.       grid-area: main;
  61.       background: blue;
  62.     }
  63.  
  64.     .c {
  65.       grid-area: sidebar;
  66.       background: pink;
  67.     }
  68.  
  69.     .d {
  70.       grid-area: footer;
  71.       background: black;
  72.     }
  73.   </style>
  74. </head>
  75.  
  76. <body>
  77.   <main>
  78.     <header>This is the header</header>
  79.     <div>This is the title</div>
  80.     <nav>This is the nav</nav>
  81.     <article>
  82.       This is the article. This is the article. This is the article. This is the article.
  83.       This is the article. This is the article. This is the article. This is the article.
  84.       This is the article. This is the article. This is the article. This is the article.
  85.       This is the article. This is the article. This is the article. This is the article.
  86.       This is the article. This is the article. This is the article. This is the article.
  87.       This is the article. This is the article. This is the article. This is the article.
  88.     </article>
  89.     <footer>This is the footer</footer>
  90.     </main>
  91. </body>
  92.  
  93. </html>

grid-row  和 grid-template  可以分别指定  在 横向网格 和  竖直网格上  起始位置到终点位置

 grid-column: 1/2;  表示从第一列开始  第二例结束  占一格

grid-row: 1 / span 2; 表示从第一行开始  占两格  相当于从第一行开始 第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.   <title>Document</title>
  8.   <style>
  9.     .container {
  10.       display: grid;
  11.       grid-template: auto 1fr auto / auto 1fr auto;
  12.       height: 99vh;
  13.     }
  14.     .border {
  15.       border: 1px solid red;
  16.     }
  17.     /* grid-column 表示从哪一列开始 哪一列结束 */
  18.     .header,.footer{
  19.       padding: 10px;
  20.       grid-column: 1 / 4; 
  21.     }
  22.     .left{
  23.       grid-column: 1/2;
  24.     }
  25.     .container1{
  26.       display: grid;
  27.       grid-template: auto  auto auto/ auto auto auto;
  28.     }
  29.     .border1{
  30.       grid-row: 1 / span 2;
  31.     }
  32.   </style>
  33. </head>
  34. <body>
  35.   <div class="container">
  36.     <div class="border header">Header</div>
  37.     <div class="border left">Left Sidebar</div>
  38.     <div class="border main">Main Content</div>
  39.     <div class="border right">Right Sidebar</div>
  40.     <div class="border footer">Footer</div>
  41.   </div>
  42.   <!-- 在Y轴上的起终位置 -->
  43.   <div class="container1">
  44.     <div class="border border1">11</div>
  45.     <div class="border">22</div>
  46.     <div class="border">33</div>
  47.     <div class="border">44</div>
  48.     <div class="border">55</div>
  49.     <div class="border">66</div>
  50.   </div>
  51. </body>
  52. </html>

auto-fill  和  auto-fit的区别

grid布局有一个非常强大的功能  模式填充（repeat-to-fill）可以对剩下内容进行填充分配  也就是我们只需要关注列的数目 不用考虑在大于预期宽度或者小于宽度的时候  用js或者用媒体查询来进行自适应屏幕大小 

比如  我们现在指定容器有4列 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))

当屏幕大于300*4 的时候  屏幕宽度是1500   1500-(300*4) 剩余空间是300  fit就会将剩下的空间300在平均分配给这4个容器  容器对应的宽度是  300 + 300/4 = 375

当屏幕宽度小于300*4的时候  屏幕宽度是1000 只能放下3个容器  那么第四个就会被排到下一行 然后把1000宽度 平均分配给这3个容器  以此类推  知道在手机端展示  只显示一行 

auto-fill 与 auto-fit 基本是一样的  不同的是  当屏幕宽度大于所有子容器宽度之和的时候   不会将剩余的空间平均分配给子容器

案例如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <style>
  10.     .container {
  11.       display: grid;
  12.       /* 当元素宽度小于300px时候 以最小单位300px来展示  当大于300px时候 将自适应屏幕
  13.       如果改为auto-fill 当大于300px的时候  不会自适应填充剩下的空间 */
  14.       grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  15.       height: 90vh;
  16.     }
  17.  
  18.     .border {
  19.       border: 1px solid red;
  20.     }
  21.   </style>
  22. </head>
  23.  
  24. <body>
  25.   <div class="container">
  26.     <div class="border">1</div>
  27.     <div class="border">2</div>
  28.     <div class="border">3</div>
  29.     <div class="border">4</div>
  30.   </div>
  31. </body>
  32.  
  33. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/295288
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号