简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > grid网格应用案例
Blogger Information
Blog 25
fans 0
comment 0
visits 13656
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
370 people have browsed it

1.grid布局时牵涉到的代码?

  1. display : grid
    划分网格
  2. grid-template-columns: 100px 100px 1000x;
  3. gird-template-rows: 100px 100px 100px;
    网格的排列顺序
    grid-auto-flow : rows/comumns:
    设置多余网格的尺寸
    grid-auto-rows/columns:
    网格的对其方案
    place-content : start/end/center/space-between/space-evently
    网格中项目的排列方案
    place-items : start/end/center
    网格中项目的间隙
    gap:
    实例及代码如下:
    效果图:grid效果图
    代码如下:
    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. </head>
    9. <body>
    10.  <div class="container">
    11.      <div class="item">1</div>
    12.      <div class="item">2</div>
    13.      <div class="item">3</div>
    14.      <div class="item">4</div>
    15.      <div class="item">5</div>
    16.      <div class="item">6</div>
    17.      <div class="item">7</div>
    18.      <div class="item">8</div>
    19.      <div class="item">9</div>
    20.      <div class="item">隐式1</div>
    21.      <div class="item">隐式2</div>
    22.  </div>
    23.  <style>
    24.      body{
    25.          margin:20px;
    26.      }
    27.      .container{
    28.          box-sizing: border-box;
    29.          display:grid;
    30.          grid-template-rows:120px 120px 120px;
    31.          grid-template-columns:120px 120px 120px;
    32.          place-content: start start;
    33.          place-items:center center;
    34.          gap:10px;
    35.      }
    36.      .container .item{
    37.          width: 110px;
    38.          height: 110px;
    39.          background-color:aqua;
    40.          border:1px solid green;
    41.      }
    42.  </style>
    43. </body>
    44. </html>
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！