Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid的9个属性
Blogger Information
Blog 35
fans 0
comment 0
visits 16925
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的9个属性
三九三伏
Original
894 people have browsed it

grid的9个属性

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></title>
  8.     <link rel="stylesheet" href="test.css">
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <div class="item">1</div>
  13.         <div class="item">2</div>
  14.         <div class="item">3</div>
  15.         <div class="item">4</div>
  16.         <div class="item">5</div>
  17.         <div class="item">6</div>
  18.         <div class="item">7</div>
  19.         <div class="item">8</div>
  20.         <div class="item">9</div>
  21.     </div>
  22. </body>
  23. </html>

test.css基础代码

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }

1. grid属性

容器网格显示

2. grid-template-columns/rows属性

容器的列数/行数

综合以上属性画网格

在test.css中增加

  1. .container{
  2.     ...
  3.     /* 设置网格整体大小 */
  4.     width: 30em;
  5.     height: 30em;
  6.     /* 设置网格背景色 */
  7.     background-color: wheat;
  8.      /* 显示为网格 */
  9.     display: grid;
  10.     /* 画个3行3列的网格 */
  11.     grid-template-columns:repeat(3,10em);
  12.     grid-template-rows:repeat(3,10em);
  13. }


在网格里显示项目，

  1. ...
  2. .container > .item{
  3.     /* 网格项目背景颜色设置 */
  4.     background-color: violet;
  5. }

3. grid-area属性

grid-area：行 列 行扩展 列扩展

  1. .container > .item{
  2.     /* 网格项目背景颜色设置 */
  3.     background-color: violet;
  4.     grid-area: 2 / 1 /span 2 / span 2;
  5. }


删除grid-area设置，调整项目大小，

  1. ...
  2. .container > .item{
  3.     /* 网格项目背景颜色设置 */
  4.     background-color: violet;
  5.     width: 6em;
  6.     height: 6em;
  7. }

4. grid-auto-flow属性

网格按行/列排列

  1. .container{
  2.     ...
  3.     /* 网格按列排列 */
  4.     grid-auto-flow: column;
  5. }

  1. .container{
  2.     ...
  3.     /* 网格按行排列 */
  4.     grid-auto-flow: row;
  5. }


当网格项目增加超过网格原定数目时，自动增加行/列，本例画了9个网格，当增加两个项目时，

  1.     <div class="container">
  2.         ...
  3.         <div class="item">10</div>
  4.         <div class="item">11</div>
  5.     </div>

因为有grid-auto-flow: row设置，所以行方向自动增加两个项目，

grid-auto-flow: column时，则列方向增加两个，

5. grid-auto-rows属性

自动增加行的大小

  1. .container{
  2.     ...
  3.     /* 网格按行排列 */
  4.     grid-auto-flow: row;
  5.     /* 给自动新增的网格设置大小 */
  6.     grid-auto-rows: 10em;
  7. }

6. gap属性

行列间隙

  1. .container{
  2.     ...
  3.     /* 给网格增加行间隔和列间隔 */
  4.     gap: 5px 10px;
  5. }

7. place-content属性

place-content：垂直方向，水平方向。（对齐）
对齐的前提，要有剩余空间。
将网格重置回这个效果，

调整grid，使其有剩余空间。

  1. .container{
  2.      ...
  3.     /* 改变宽度和高度 */
  4.     width: 40em;
  5.     height: 50em;
  6.      ...
  7.     /* 垂直方向居中和水平方向靠右 */
  8.     place-content: center end;
  9. }


垂直和水平方向都居中

  1. .container{
  2.      ...
  3.     /* 垂直和水平方向都居中 */
  4.     place-content: center;
  5. }


拿掉网格线看，更加明显。

垂直方向两端对齐和水平方向分散对齐

  1. .container{
  2.      ...
  3.     /* 垂直方向两端对齐水平方向分散对齐 */
  4.     place-content: space-between space-around;
  5. }

8. place-item属性

项目在网格单元中的对齐

  1. .container{
  2.      ...
  3.     /* 左上角 */
  4.     place-items: start start;
  5. }

  1. .container{
  2.      ...
  3.     /* 垂直居中水平靠右 */
  4.     place-items: center end;
  5. }

9. place-self属性

单独调整某一个项目

  1. .container > .item:nth-of-type(5){
  2.     /* 网格项目背景颜色设置 */
  3.     background-color: lightgreen;
  4.     place-self: end end;
  5. }

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