Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Grid布局10大属性操作演示
Blogger Information
Blog 14
fans 2
comment 2
visits 6659
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布局10大属性操作演示
西门瑶雪
Original
428 people have browsed it

Grid布局10大属性操作演示

10大属性

1、grid：创建grid容器
2、grid-template-rows/columns:显示网格单元
3、grid-area：将项目放到指定的网格单元中
4、grid-auto-flow：行与列的排序规则，默认是rows；
5、grid-auto-rows/columns：显示网格的行/列的大小
6、gap：行与列的间距，只写一个则第二个默认同第一个相同
7、place-content：所有项目在容器的对齐方式（容器元素）
8、place-items：所有项目在单元格的对齐方式（容器元素）
9、place-self：某个项目在网格单元中对齐方式（项目元素）
10、grid-row/column：行或列的跨越数量（项目元素）

图例效果

html

  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>Grid布局容器框架</title>
  8.     <link rel="stylesheet" href="grid.css">
  9. </head>
  10. <body>
  12. <div class="main">
  13. <div class="grd"></div>
  16. </div>
  18.     <!--
  19. <style>
  20.     /*
  21.     1、创建grid
  22.     2、划分网格单元
  23.     */
  24.     body * {
  25.         outline: 1px solid rgb(221, 23, 23);
  26.     }
  27.     .nav{
  28.         width: 30em;
  29.         height: 30em;
  31.         width: 40em;
  32.         height: 50em;
  34.         display: grid;
  35.         background-color: rgb(209, 142, 142);
  36.         grid-template-columns:repeat(3,10em);
  37.         grid-template-rows: 10em 10em 10em;
  38.         place-content: start start;
  39.         place-content: center center;
  40.         place-content: place-between;
  41.     }
  42. .nav .sa1{
  43.     background-color: blueviolet;
  44.     grid-row: 2 / 3;
  45.     grid-column: 2 / 3;
  47.     grid-row: 2 / 4;
  48.     grid-column: 2 / 4;
  50.     grid-row:2 / span 2;
  51.     grid-column: 2 / span 2;
  52. }
  53. .nav .sad{
  54.     width: 3em;
  55.     height: 3em;
  56.     background-color: blueviolet;
  57.     place-items: center;
  58.     place-content: content;
  59. }
  61. </style>
  62. ---->
  63. </body>
  64. </html>

CSS代码演示

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. body * {
  7.     outline: 1px solid rgb(27, 4, 4);
  8. }
  10. /*
  11. 1、创建grid
  12. 2、画格子
  13. */
  14. .main{
  15. height: 50em;
  16. width: 50em;
  17.     background-color: rgb(247, 211, 8);
  18.     display: grid;
  19.       /*
  20.     grid-template-columns: 10em 10em 10em;
  21.     grid-template-rows: 10em 10em 10em;
  22.   创建格子简化用 repeat共2个参数 重复的次数，重复的值*/
  23.     grid-template-rows: repeat(3,10em);
  24.     grid-template-columns: repeat(3,10em);
  25.     grid-auto-flow: column;
  26.     grid-auto-flow: row;
  27.     gap:5px 10px;
  28.     gap:0px;
  29.     place-content: center center;
  30.     place-content: center start;
  31.     place-content: start;
  32.     place-content: end;
  33.     place-content: space-between end;
  34.     place-content: space-between;
  35.     place-items: center;
  36.     place-content: end;
  37.     place-content: start;
  38.     place-items: center;
  39.     place-content: center center;
  41. }
  42. .main .grid:nth-of-type(3){
  43.     place-self: end;
  44. }
  45. .main .grid{
  46.     height: 5em;
  47.     width: 5em;
  48.     background-color: rgb(209, 178, 178);
  51.  /*
  52.     grid-row: 1 / 2;
  53.     grid-column: 1 / 2;
  54.     grid-row: 2 / 4;
  55.     grid-column: 2 / 4;   
  56.     grid-row-start: 2;
  57.     grid-column-start: 2;
  58.     grid-row-end: 1;
  59.     grid-column-end:3;
  60.     height: 5em;
  61.     width: 5em;
  62.     grid-area:直接定义网格区域
  63.     有4个数值：行开始，列开始，行结束(跨越的行数)，列结束（跨越的列数）
  64.      */
  65.    /* grid-row: 3 / span 1;
  66.     grid-column: 1 / span 3;  
  67.     grid-area: 2 / 1 / span 1 /span 3; 
  68.     新生成的项目，自动放入自动生产的单元格，并且与新单元格的宽度自适应
  69.     gap 有行间距，列间距
  70.     */
  72. }
Correcting teacher：PHPzPHPz

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