1.作用在网格内容中的容器属性

display    grid-template   gap  items

content  grid-auto  grid

2.Display

display：grid| inline-grid| subgrid;

<div class="container">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
  <div class="item">four</div>
  <div class="item">five</div>
  </div>
  .container{
    display:grid|inline-grid|subgrid
   }

grid 生成块级网格   inline-grid 生成行内网格

*当元素设置了网格布局，column、float、clear、vertical-align属性无效

grid属性的特性，让一些属性失效，subgrid无法使用，浏览器不兼容

grid属性的分类

如图，grid的三种属性，grid的属性只会影响直接子元素，grid生成块级网格，inline-grid生成行内网格

dispaly:grid | inline-grid| subgrid

grid的属性： 分为两波，一波在网格容器中，一波在网格项中。

作用在网格容器中的属性：

1. display: 说明哪个是网格容器

2. grid-template: 网格模板

3. gap：网格容器和网格容器之间的间隔空隙

4. items: 网格项的对齐属性

5. content : 内容方面的对齐

6. grid-auto: 对于我们已经定义好的网格模板之外。它会自动生成一个网格

7. grid：以上1-5项 。 也可以用gird统写
   

当元素设置了网格布局，

display：grid  |  inline-grid  |  subgrid；

column、float、clear、vertical-align属性无效

当元素设置了网格布局，

display：grid  |  inline-grid  |  subgrid；

column、float、clear、vertical-align属性无效

画重点！！！！！

display: grid | inline-grid | subgrid;

注意

--当元素设置成网格布局，column,float,clear,vertical-align属性无效。subgrid目前所有浏览器都不兼容

display：grid（用得最多） | inline-grid | subgrid;

inline-grid——行内网格。

subgrid——如果网格容器本省时网格项（嵌套网格容器），此属性用来继承父级网格属性，目前存在兼容性问题。

当元素设置了网格布局，column、float、clear、vertical-align属性无效。

在设置了grid后: column float clear vertical-align属性无效!

display: grid | inline-grid | subgrid;

grid-template

gap

items

content

grid-auto

grid