简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 隐式网格实例-对其方式以及间隙
Blogger Information
Blog 27
fans 1
comment 2
visits 90425
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
隐式网格实例-对其方式以及间隙
          
Original
466 people have browsed it
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>1027作业</title>
  9. <!--  作业内容：
  10.       实例演示隐式网格, 对齐方式与行列间隙的设置方式与使用场景、前提-->
  11. </head>
  12. <style>
  13.     /*对齐方式：    容器中: place-content, place-items
  14.                   项目中: place-self*/
  15.     /* 行列间隙 gap  */
  16.     /* gap: 垂直方向 水平方向  */
  18.      /*1. 对齐前提: 必须存在"剩余空间"*/
  19.      /*2. 对齐方案: "剩余空间"在"项目"之间的分配方式*/
  20.      /*3. 剩余空间: Flex(主轴, 交叉轴), Grid(容器, 单元格)*/
  21.      /*Grid: 剩余空间存在于"容器" 或 "单元格"*/
  22.      /*容器中: place-content, place-items*/
  23.      /*项目中: place-self*/
  27.     /*容器*/
  28.     .container{
  29.        display: grid;
  30.         border: 1px solid red;
  31.         grid-template-rows:repeat(3,100px);
  32.         grid-template-columns: repeat(3,100px);
  33.         width: 500px;
  34.         height: 400px;
  35.         place-content: stretch;
  37.         /*项目在单元格里面的对齐，垂直和水平都居中*/
  38.         place-items: center;
  39.         /*垂直间距10px  水平间距20px*/
  40.         gap: 10px 20px;
  41.     }
  42.     /*显示网格*/
  43.     .container .item{
  44.         height: 50px;
  45.         width: 50px;
  46.         background-color: #f3d19e;
  47.     }
  48.     /*隐式网格*/
  49.     .container .item.as{
  50.         background-color: #55a532;
  52.     }
  53.     .container .item:nth-of-type(8){
  54.         background-color: skyblue;
  55.         /*item8 单元格内的对齐方式右边*/
  56.         place-self:end ;
  57.     }
  58. </style>
  59. <body>
  60. <div class="container">
  61.     <div class="item">item-1</div>
  62.     <div class="item">item-2</div>
  63.     <div class="item">item-3</div>
  64.     <div class="item">item-4</div>
  65.     <div class="item">item-5</div>
  66.     <div class="item">item-6</div>
  67.     <div class="item">item-7</div>
  68.     <div class="item">item-8</div>
  69.     <div class="item">item-9</div>
  70. <!--    增加三个,此是隐式网格-->
  71.     <div class="item as">item-10</div>
  72.     <div class="item as ">item-11</div>
  73.     <div class="item as">item-12</div>
  74. </div>
  75. </body>
  76. </html>

运行结果

1.实例演示隐式网格

  1. 对齐方式：
  2. 容器中: place-content, place-items
  3. 项目中: place-self
  4. 对齐前提: 必须存在"剩余空间
  5. 对齐方案: "剩余空间"在"项目"之间的分配方式
  6. 容器中: place-content, place-items
  7. 项目中: place-self

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！