Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 小结：课前预习grip的属性
Blogger Information
Blog 31
fans 2
comment 0
visits 27670
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
小结：课前预习grip的属性
霏梦
Original
1000 people have browsed it
  • 作者：霏梦
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>css grid网格布局教程</title>
  7.     <style>
  8.       /* 最强大的css布局方案 */
  9.       /* 他将网页划分成一个个网络，可以任意组合不同的网格，做出各种各样的布局 */
  11.       .container {
  12.         display: grid;
  13.         /* 容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高 */
  14.         /* grid-template-columns: 100px 100px 100px; */
  15.         /* grid-template-rows: 100px 100px 100px; */
  16.         /* 上面指定了行和高为100px */
  17.         /* 除了用绝对单位，也可用使用百分比 */
  18.         /* grid-template-columns: 33.33% 33.33% 33.33%; */
  19.         /* grid-template-rows: 33.33% 33.33% 33.33%; */
  21.         /* repeat */
  22.         /* 接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。 */
  23.         /* grid-template-columns: repeat(3, 33.33%); */
  24.         /* grid-template-rows: repeat(3, 100%); */
  26.         /* auto-fill 表示自动填充 */
  27.         /* grid-template-columns: repeat(auto-fill, 100px); */
  29.         /* fr关键字 */
  30.         /* 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。 */
  31.         /* grid-template-columns: 1fr 1fr; */
  33.         /* fr可以与绝对长度的单位结合使用，这时会非常方便 */
  34.         /* 第一列的宽度为150像素，第二列的宽度是第三列的一半 */
  35.         /* grid-template-columns: 100px 1fr 2fr; */
  37.         /* minmax() */
  38.         /* 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值 */
  39.         /* grid-template-columns: 1fr 1fr minmax(100px, 1fr); */
  41.         /* auto关键安：关键字表示由浏览器自己决定长度 */
  42.         /* grid-template-columns: 100px auto 100px; */
  44.         /* 网格线的名称 */
  45.         /* 属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。 */
  46.         grid-template-columns: [a1] 100px [a2] 100px [a3] auto;
  47.         grid-template-rows: [b1] 200px [b2] 200px [b3] auto;
  48.       }
  49.       .item {
  50.         font-size: 2em;
  51.         text-align: center;
  52.         border: 1px solid greenyellow;
  53.       }
  54.       .item-1 {
  55.         background-color: red;
  56.       }
  57.       .item-2 {
  58.         background-color: yellowgreen;
  59.       }
  60.       .item-3 {
  61.         background-color: greenyellow;
  62.       }
  63.       .item-4 {
  64.         background-color: blue;
  65.       }
  66.       .item-5 {
  67.         background-color: blueviolet;
  68.       }
  69.       .item-6 {
  70.         background-color: cyan;
  71.       }
  72.       .item-7 {
  73.         background-color: darkorange;
  74.       }
  75.       .item-8 {
  76.         background-color: olivedrab;
  77.       }
  78.       .item-9 {
  79.         background-color: olive;
  80.       }
  81.     </style>
  82.   </head>
  83.   <body>
  84.     <!-- Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大 -->
  85.     <!-- 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column） -->
  86.     <!-- 行和列的交叉区域，称为"单元格"（cell）。 -->
  87.     <!-- 正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格 -->
  88.     <p>第一行</p>
  89.     <!-- 下面第一个div是容器 -->
  90.     <div class="container">
  91.       <!-- 以下div是项目 -->
  92.       <!-- 注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。 -->
  93.       <div class="item item-1"><p>1</p></div>
  94.       <div class="item item-2">2</div>
  95.       <div class="item item-3">3</div>
  96.       <div class="item item-4">4</div>
  97.       <div class="item item-5">5</div>
  98.       <div class="item item-6">6</div>
  99.       <div class="item item-7">7</div>
  100.       <div class="item item-8">8</div>
  101.       <div class="item item-9">9</div>
  102.     </div>
  103.     <p>最后一行</p>
  104.   </body>
  105. </html>
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