Skip to content

Latest commit

 

History

History
192 lines (167 loc) · 4.96 KB

3.2.5 css grid.md

File metadata and controls

192 lines (167 loc) · 4.96 KB
Raw

css grid: CSS 网格布局(Grid Layout)

display：grid把容器元素定义为一个网格
使用grid-template-columns和grid-template-rows设置列和行大小，
然后使用grid-column 和 grid-row把它的子元素放入网格

Grid 属性列表

Grid Container 的全部属性
  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-column-gap
  • grid-row-gap
  • grid-gap
  • justify-items
  • align-items
  • justify-content
  • align-content
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid

Grid Items 的全部属性

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-area
  • justify-self
  • align-self

使用

父容器(Grid Container)

.container {
  display: grid | inline-grid | subgrid;
}
注意：column, float, clear, 以及 vertical-align 对一个 grid container 没有影响

grid-template-columns / grid-template-rows

  • grid-template-columns: 100px 100px 100px; // 设置的列的个数为 3 ,列的宽度为 100px
  • grid-template-rows: 100px 100px 100px; // 设置的列的个数为 3 ,行的宽度为 100px

使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)

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

如果你的定义中包含重复的部分，则可以使用repeat() 符号来简化写法：

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

fr”单位允许您将轨道大小设置为网格容器自由空间的一部分。 例如，下面的代码会将每个 grid item 为 grid container 宽度的三分之一：

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

grid-template-areas 通过引用 grid-area属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。

值：

<grid-area-name> - 使用 grid-area 属性设置的网格区域的名称
. - 点号代表一个空网格单元
none - 没有定义网格区域
举例：

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

.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";
}
这将创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行是footer区域组成。

grid-column-gap / grid-row-gap 指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。

.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-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}

justify-items 沿着行轴对齐网格内的内容

start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容位于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间(这是默认值)

.container {
  justify-items: start;
}

align-items 沿着列轴对齐grid item 里的内容

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

justify-content 设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）

start - 网格与网格容器的左边对齐
end - 网格与网格容器的右边对齐
center - 网格与网格容器的中间对齐
stretch - 调整g rid item 的大小，让宽度填充整个网格容器
space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

demo

html:
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

css:
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}