css grid

display
 
display: grid | inline-grid | subgrid;
//注意： column, float, clear, 和 vertical-align 对网格容器没有影响。
grid 生成一个块级网格
inline-grid 生成一个内联网格
subgrid  如果你的网格容器本身就是一个嵌套网格，那么你可以使用这个属性来表示你想从它的父节点取得它的行/列的大小，而不是指定它自己的大小。            
grid-template-columns / grid-template-rows
 
.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}
 
//自己命名网格线
.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
//可以有多个名称
.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

//定义包含重复部分,使用 repeat() 来简化写法：
.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
上面的写法等同于：
.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

//fr 单位允许你将轨道的大小设置为网格容器可用空间的一小部分。
//将每个项目设置为网格容器宽度的三分之一：
.container {
  grid-template-columns: 1fr 1fr 1fr;
}
//fr 单位可用的空间总量不包括 50px ：
.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}
grid-template-areas
<grid-area-name> – 使用 grid-area 属性指定网格区域的名称
. – 一个“点”表示一个空的单元格
none – 没有定义网格区域 
.container {
  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";
}
grid-template 在单个声明中设置网格模板行，网格模板列和网格模板区域的简写。
none – 将所有三个属性设置为其初始值
subgrid – 将 grid-template-rows 和 grid-template-columns 设置为 subgrid ，并将 grid-template-areas 设置为其初始值
<grid-template-rows>/<grid-template-columns> – 将 grid-template-columns 和 grid-template-rows 分别设置为指定的值, 并将 grid-template-areas 设置为 none 
.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}
//也可以使用一个更复杂但相当方便的语法来指定这三个值。例如：
.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
//上面的代码等同于：
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}
//由于 grid-template 不会重置隐含的网格属性（grid-auto-columns , grid-auto-rows , 和 grid-auto-flow），因此建议使用 grid 而不是 grid-template 。
grid-column-gap / grid-row-gap 指定网格线的大小。你可以将其想象为列/行之间的间隔宽度。
.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}
//示例：
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}
grid-gap 网格行间隔宽度和列间隔宽度的简写。

<grid-row-gap> <grid-column-gap>
.container {
  grid-gap:  ;
}
示例：

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}
//如果未指定 grid-row-gap ，则会将其设置为与 grid-column-gap 相同的值。
justify-items 沿着横向轴对齐网格内的内容（而不是沿着纵轴对齐）。该值适用于容器内的所有网格项目。
//start – 将内容与网格区域的左端对齐
//end – 将内容与网格区域的右端对齐
//center – 将内容与网格区域中心对齐
//stretch – 填充网格区域的整个宽度（这是默认值）
.container {
  justify-items: start | end | center | stretch;
} 

.container {
  justify-items: start;
}
 
.container{
  justify-items: end;
}
 
.container {
  justify-items: center;
}
 
.container {
  justify-items: stretch;
}








 

posted @ 2018-08-31 17:25  liuyj_vv  阅读(156)  评论(0)  编辑  收藏  举报