CSS布局——grid布局

grid布局

前面写了CSS布局 ——float布局和flex布局，这次写grid布局。当不需要兼容IE只需要兼容最新浏览器时可以用grid布局。grid布局是功能最强大的布局方案，二维布局用grid布局,一维布局用flex布局。grid适合不规则布局，这款grid小游戏方便我们了解掌握gird功能
详细grid布局功能

grid布局内容

container

grid也分container和items。成为container的代码

.container {
display: grid | inline-grid;
}

行和列

.container {
gird-template-columns: 40px 50px auto 50px 40px;
gird-template-rows: 20% 100px auto;
}

我们也可以给每条线取名字。如以下代码：

.container {
  gird-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  gird-template-rows: [row-start ]20% [roe1-end] 100px  [third-line] auto [last-line];
}

请注意，一行可以有多个名称>例如，此处的第二行将具有两个名称：行 1 结束和行 2-start

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

取名结果

如果您的定义包含重复部分，则可以使用符号来简化操作：repeat()

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

这相当于

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

取名字的作用在于items可以设置范围

.item-a { 
grid-column-start: 2; 
grid-column-end: five; 
grid-row-start: row1-start; 
grid-row-end: 3; 
}

该单位允许您将轨道的大小设置为网格容器可用空间的一小部分。例如，这会将每个项设置为网格容器宽度的三分之一：fr

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

分区 grid-template-areas

这将创建一个四列宽、三行高的网格。整个顶行将由标题区域组成。中间行将由两个主要区域、一个空单元格和一个侧边栏区域组成。最后一行都是页脚。

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

网格空隙gap

指定网格线的大小。可以将其视为设置列/行之间装订线的宽度。例如

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}