Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid的项目布置知识学习
Blogger Information
Blog 50
fans 0
comment 0
visits 31580
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的项目布置知识学习
手机用户1580651468
Original
391 people have browsed it

grid的项目布置知识学习

一、实例演示隐式网格

  1. 隐式网格就是保存多余的东西

一）实例代码如下：

  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属性-2：隐式网格与项目属性</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="item">item1</div>
  12.         <div class="item">item2</div>
  13.         <div class="item">item3</div>
  14.         <div class="item">item4</div>
  15.         <div class="item">item5</div>
  16.         <div class="item">item6</div>
  17.         <div class="item">item7</div>
  18.         <div class="item">item8</div>
  19.         <div class="item">item9</div>
  20.         <!-- 多余的两个 -->
  21.         <div class="item other">item10</div>
  22.         <div class="item other">item11</div>
  23.     </div>
  24.     <style>
  25.         .container{
  26.              width: 300px;
  27.              height: 150px;
  28.              display: grid;
  29.              grid-template-columns: repeat(3,1fr);
  30.              grid-template-rows: repeat(3,1fr);
  31.              /* 排列规则 */
  32.              grid-auto-flow: row;
  33.              /* 隐式网格 */
  34.              /* 多余的项目，出现在隐式网格中（自动生成） */
  35.              /* 排列规则：grid-auto-flow：row/column 行优先/列优先 */
  36.              /* 隐式网格：grid-auto-row/column */
  37.              grid-auto-rows: 1fr;
  38.              grid-auto-flow: 50px;
  40.         }
  41.         .container > .item{
  42.             background-color: wheat;
  43.         }
  44.         .container > .item.other{
  45.             background-color: red;
  46.         }
  47.     </style>
  48. </body>
  49. </html>

二）运行的效果图：

二.grid项目对齐方式与行列间隙的设置方式

一）项目对齐方式

  1.   1.对齐前提：必须存在“剩余空间”
  2.   2.对齐方案：”剩余空间“在”项目“之间的分配方式
  3.   3.剩余空间：flex（主轴，交叉轴），grid（容器，单元格） 
  4.   4.grid的剩余空间存在“容器”或“单元格”

1.html代码：

  1.     <div class="container">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.     </div>

2.css代码：

  1. <style>
  2.         .container {
  3.             display: grid;
  4.             grid-template-columns: repeat(3,100px);
  5.             grid-template-rows: repeat(3,100px);
  6.         }
  7.         .container > .item{
  8.             background-color: wheat;
  9.             width: 50px;
  10.             height: 50px;
  11.         }
  12.         .container{
  13.             width: 450px;
  14.             height: 450px;
  15.             border: 1px solid #000;
  16.             background-color: lightcyan;
  18.             place-content: start start;
  19.             /* 垂直居中 */
  20.             place-content: center end;
  21.             /* 二值相等 */
  22.             place-content: center center;
  24.             place-content: space-between space-around;
  25.             place-content: space-between space-between;
  26.             place-content: space-between;
  27.             place-content: space-around;
  29.  /* 项目在单元格中对齐 */
  30.             place-items: start start;
  31.             place-items: center end;
  32.             place-items: center;
  34.         }
  36.     </style>

3.运行的效果图：

二）行列间隙设置方式

1.代码如下：

  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属性-4：行列间隙设置方式</title>
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="item">item1</div>
  12.         <div class="item">item2</div>
  13.         <div class="item">item3</div>
  14.         <div class="item">item4</div>
  15.         <div class="item">item5</div>
  16.         <div class="item">item6</div>
  17.         <div class="item">item7</div>
  18.         <div class="item">item8</div>
  19.         <div class="item">item9</div>
  20.     </div>
  21.     <style>
  22.         .container {
  23.             display: grid;
  24.             grid-template-columns: repeat(3,100px);
  25.             grid-template-rows: repeat(3,100px);
  26.      /* 行列间隙 */
  27.      /* gap: 垂直方向 水平方向 */
  28.              gap: 5px 10px;
  29.         }
  30.         .container > .item{
  31.             background-color: wheat;
  32.         }
  33.     </style>
  34. </body>
  35. </html>

2.运行的效果图：

三.grid项目使用场景、前提

  1. grid的使用场景可以是单元格的栅格矩阵,栅格布局⽐较合适。
  2. grid的使用前提现在Grid布局基本主流的浏览器都支持, CSS3 Grid Layout是一个新的模块,这个模块主要定义一个二维网格布局系统,用来优化用户界面设计。
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