CSS-基础(五)

CSS学习笔记（五）

Grid 栅格系统

grid声明

• grid – generates a block-level grid
• inline-grid – generates an inline-level grid

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

格子布局

grid-template-columns grid-template-rows

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

利用repeat( [n], [size] )快速分配. 比如grid-template-rows:repeat(4,25%) [均等绘制4行] or grid-template-rows:repeat(2, 100px, 50px)[绘制4行分别为100px，50px，100px，50px 高]

fr unit

fr : To set the size of a track as a fraction of the free space of the grid container and the free space is calculated after any non-flexible items.

.container {
  display:grid;
  widht:350px;
  grid-template-columns: 1fr 50px 1fr 1fr; /*100px 50px 100px 100px */
}

minmax(unit,unit) 控制格子最大最小值

.container {
  display:grid;
  widht:350px;
  grid-template-columns: repeat(2,minmax(50px,100px))
}

gap 格间距

row-gap:[unit] column-gap:[unit]

Shorthand: gap:<row-gap> <column-gap>

grid-template-areas

通过引用使用grid-area属性指定的网格区域的名称来定义网格模板。

.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";
}

控制行列对其方式 与Flex类似

控制单元格内部列对齐 justify-items

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

控制单元格内部行对齐 align-items

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

• 如果容器container的大小超过内部所有格子的大小，那么可以使用 justify-content 和 align-content 来控制在其容器总的对齐方式