Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid课后练习
Blogger Information
Blog 26
fans 0
comment 0
visits 15658
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课后练习
庄周梦蝶
Original
656 people have browsed it

grid的基本属性

  1. <style>
  2.     .con{
  3.     display:grid;
  4.     /* 变成网格布局 */
  5.     grid-template-columns: 10em 10em 10em;
  6.     /* 设置几列和列宽 */
  7.     grid-template-rows: 5em 5em;
  8.     /* 设置网格单元与网格单元之间的轨道间隙的宽度，第一个值是行，第二个是列*/
  9.     gap: 0.5em 1em;
  10.     /* 要是行和列的间隙一样，可以只写一个值 */
  11.     gap: 0.5em;
  12.     border: 1px solid;
  13.     padding: 0.5em;
  14.     }
  15.     .con>span{
  16.     padding: 0.5em;
  17.     background-color: aqua;
  18.     }
  19. </style>
  20. <body>
  21. <div class="con">
  22.       <span class="item">item1</span>
  23.       <span class="item">item2</span>
  24.       <span class="item">item3</span>
  25.       <span class="item">item4</span>
  26.       <span class="item">item5</span>
  27.       <span class="item">item6</span>
  28.     </div>
  29. </body>

grid的单位

  1. <style>
  2.     .con{
  3.     display:grid;
  4.     /* 中间是两边的两倍 */
  5.     grid-template-columns: 1fr 2fr 1fr;
  6.     /* 用百分比来实现中间是两边的两倍会超出网格，因为百分比不识别列间隙 */
  7.     grid-template-columns: 20% 60% 20%; 
  8.     /* 百分比可以和fr共存，计算方式是总宽度减去百分比的宽度后剩下的都给fr，写几fr都行，因为没有其他fr做比较 */
  9.     grid-template-columns: 20% 1fr 20%;
  10.     /* 当只有auto和百分比是时候，auto会平均分配减去20%的值 */
  11.     grid-template-columns: auto auto 20%;
  12.     /* 当auto fr % 在一起的时候，auto是根据内容来定宽度，剩下的都给fr，不管是几fr */
  13.     grid-template-columns: 20% 1fr 20%;
  14.     grid-template-rows: 5em 5em;
  15.     gap: 0.5em 1em;
  16.     gap: 0.5em;
  17.     border: 1px solid;
  18.     padding: 0.5em;
  19.     }
  20.     .con>span{
  21.     padding: 0.5em;
  22.     background-color: aqua;
  23.     }
  24. </style>
  25. <body>
  26. <div class="con">
  27.       <span class="item">item1</span>
  28.       <span class="item">item2</span>
  29.       <span class="item">item3</span>
  30.       <span class="item">item4</span>
  31.       <span class="item">item5</span>
  32.       <span class="item">item6</span>
  33.     </div>
  34. </body>

常用函数

  1. <style>
  2.     .con{
  3.     display:grid;
  4.     grid-template-columns: 10em 10em 10em;
  5.     grid-template-rows: 5em 5em;
  6.     /* 1.repeat()第一个值是重复的次数,第二个是重复的尺寸 */
  7.         grid-template-columns: repeat(3, 10em);
  8.         /* 第二个值可以写多个值，重复是重复一组 */
  9.         /* grid-template-columns: repeat(3, 10em 2em); */
  10.         /* 可以混合写 ，就是把括号里面的重复完后再现实后面的尺寸*/
  11.         /* grid-template-columns: repeat(2, 1fr) 2fr; */
  12.         /* minmax设置最大最小值，前面是最小，后面是最大，
  13.         下面这个意思就是中间最小是20em，最大是左右的2倍 */
  14.         grid-template-columns: 1fr minmax(20em, 2fr) 1fr;
  15.     gap: 0.5em 1em;
  16.     border: 1px solid;
  17.     padding: 0.5em;
  18.     }
  19.     .con>span{
  20.     padding: 0.5em;
  21.     background-color: aqua;
  22.     }
  23. </style>
  24. <body>
  25. <div class="con">
  26.       <span class="item">item1</span>
  27.       <span class="item">item2</span>
  28.       <span class="item">item3</span>
  29.       <span class="item">item4</span>
  30.       <span class="item">item5</span>
  31.       <span class="item">item6</span>
  32.     </div>
  33. </body>

隐试轨道

没有设置过和定义过的轨道单元叫隐试轨道，设置和定义过的叫显式轨道

  1. <style>
  2.     .container {
  3.     display: grid;
  4.     grid-template-columns: repeat(3, 1fr);
  5.     grid-template-rows: 5em 5em;
  6.     border: 1px solid;
  7.     padding: 0.5em;
  8.     gap: 0.5rem;
  9.     /* 新增加了三个容器，但是没有设置，它就会自动排列到自动生成的网格空间中 */
  10.     /* 此时，多出的三个项目自动排列进去了 */
  11.     /* 设置过的声明过的网格中的轨道叫显式轨道 */
  12.     /* 没有声明过自动排列进去的叫隐式轨道 ，它的属性是自动的*/
  13.     /* 都是按照行优先排列的，一行排不下就会换行，叫行优先 */
  14.     /* 设置排列优先级 ，默认是行排列*/
  15.     grid-auto-flow: row;
  16.     /* 设置隐试轨道的行高，当是行优先的时候管用 */
  17.     grid-auto-rows: 5em;
  18.     /* 列优先 */
  19.     grid-auto-flow: column;
  20.     /* 设置隐试轨道的列宽，当是列优先是时候管用 */
  21.     grid-auto-columns: 1fr;
  22.     }
  23.     .container > .item {
  24.     background-color: aqua;
  25.     padding: 0.5rem;
  26.     }
  27.     </style>
  28.   <body>
  29.     <div class="container">
  30.       <span class="item">item1</span>
  31.       <span class="item">item2</span>
  32.       <span class="item">item3</span>
  33.       <span class="item">item4</span>
  34.       <span class="item">item5</span>
  35.       <span class="item">item6</span>
  36.       <span class="item">item7</span>
  37.       <span class="item">item8</span>
  38.       <span class="item">item9</span>
  39.     </div>
  40.   </body>

更改项目显示位置

  1.  <style>
  2.       .container {
  3.         display: grid;
  4.         grid-template-columns: repeat(3, 1fr);
  5.         grid-template-rows: 5em 5em;
  6.         border: 1px solid;
  7.         padding: 0.5em;
  8.         gap: 0.5rem;
  9.         /* 设置任意一个项目所在的网格单元的区域 */
  10.         /* grid-area: ;行起始编号/列起始编号/行结束编号/网格结束编号/ */
  11.         grid-auto-rows: 5em;
  12.       }
  13.       .container > .item {
  14.         background-color: aqua;
  15.         padding: 0.5rem;
  16.       }
  17.       .container > .item:nth-of-type(5) {
  18.         background-color: blue;
  19.         /* 把第五个放到第一个 */
  20.         grid-area: 1/1/2/2;
  21.         /* 默认跨列一行一列，下面是简写 */
  22.         grid-area: 1/1;
  23.         /* 但是夸一行以上就不能简写了 */
  24.         grid-area: 1/1/3/4;
  25.         /* 通常自关心夸几行几列，并不关心结束的编号 */
  26.         /* 下面的意思是，跨几行用span来表示，跨两行三列 */
  27.         grid-area: 1/1 / span 2 / span 3;
  28.       }
  29.       .container > .item:first-of-type {
  30.         background-color: brown;
  31.         /* 通栏了，从起始位置跨上1行三列 */
  32.         grid-area: 3/1 / span 1 / span 3;
  33.         /* 因为是从起始位置开始的，可以省略 */
  34.         grid-area: span 1 / span 3;
  35.         /* 因为默认是跨一行，所以还可以简写 */
  36.         grid-area: auto/ span 3;
  37.       }
  38.     </style>
  39.   <body>
  40.     <div class="container">
  41.       <span class="item">item1</span>
  42.       <span class="item">item2</span>
  43.       <span class="item">item3</span>
  44.       <span class="item">item4</span>
  45.       <span class="item">item5</span>
  46.       <span class="item">item6</span>
  47.       <span class="item">item7</span>
  48.       <span class="item">item8</span>
  49.       <span class="item">item9</span>
  50.     </div>
  51.   </body>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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