grid 布局基本知识 -

根据目前所学的Grid布局并实战:

与flex不同的地方，grid布局多出了一个单元格的概念！这里可以理解成3层概念，容器－单元格－项目 [PS;实际还是2层!]
并且申明方式:为display:grid;
申明之后,就开始在grid里面画板块!就是这么简单!
grid-template-cloumn:要几列,写几列!,画嘛!
grid-template-row:要几行,写几行!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid布局</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">1</div>
      <div class="item">1</div>
    </div>
  </body>
</html>

由此可见，grid确实是蛮方便的哈！
grid还单独提供一个简便的设置单元格属性的神操作：行间距和列间距的设置例如：
column-gap:10px; row-gap:5px;
简写：gap:行间距列间距

因此，得出的结论：
grid布局太方便了，哈哈！通过以上，总结
容器和单元格的关系

步骤	关键字	说明	简写方式
第一步：	display:grid	设置为grid容器	无


第二步：	grid-template-columns:100px 100px 100px	设置3列为100width的列	相同参数的情况下：grid-template-column:repeat(3,1fr)
	grid-template-rows:100px 100px 100px	设置3行为100width的列	相同参数的情况下：grid-template-rows:repeat(3,1fr)
	行间距	row-gap:5px	设置行间距	gap:行间距列间距
	行间距	column-gap:10px	设置列间距	gap:行间距列间距


第三步：根据自己的需求项目里面设置单元格区域[布局]
grid-column:起始列 / 结束列；
grid-row:起始行 / 结束行；
简写：grid-area:行开始/列开始/行结束/列结束