CSS网格布局

这一部分详细介绍了网格布局的用法。

通过设置父元素来搭建整体结构

• 父元素设置为display: grid
• grid-template-rows和grid-template-columns来设定有多少行/列，每行/列的宽高是多少，如grid-template-rows: 50px 50px即总共两行，每行高50px
  • 每行/列的宽高可以设置为px,em这类固定长度单位，也可以设置为百分比，或者auto自适应，以及fr（fr是CSS3加入的新的长度单位，是一个自适应单位，表示按比例分配剩余空间，如grid-template-rows: 1fr 1fr 1fr即总共3行，每行高度为父元素高度的1/3）
  • 如果有多行内容，且宽高设置重复，可以使用repeat来设置，如grid-template-rows: repeat(100, 50px)即有100行，每行高度50px
  • 当使用repeat设置多行/列内容的宽高时，可以限制单个网格的宽高来实现响应式布局
    • 使用minmax来限制最大最小值，例：grid-template-rows: repeat(3, minmax(30px 100px))
    • 使用autofill或autofit来规定父元素宽高大于子元素之和时，子元素的大小是否随着父元素变化（autofill表示使用空元素补充多余空间，子元素大小不变；autofit表示子元素宽度按比例变化，撑满父元素）
• grid-column-gap和grid-row-gap用于规定行/列之间的距离，也可以通过grid-gap一次性设置
• justify-items和align-items设置所有元素在列/行上如何对齐，相当于设置所有元素的justify-self和align-self属性

通过设置子元素来调整单个网格的布局

• 除了通过设置父元素的grid-template-rows和grid-template-columns来确定单个网格的宽高，还可以通过设置单个网格的grid-column和grid-row来确定宽高，如grid-column：1/3表示网格宽度从表示列的第一根线条（即最左侧线条）开始，到第三条线条（第二个网格右边的线条）结束
• justify-self和align-self两个属性分别规定单个网格沿列和行在网格中的内容对齐方式，默认属性均为stretch，即占满网格区域，其他值包括start, end, center

对网格的位置进行布局

• 可以设置父元素的grid-template-areas，即作为目标设置每一行的每一列均为什么内容，可以对这一内容进行命名，通过设置子元素的grid-area来让子元素对应到父元素中的理想位置，如

grid-template-areas: 
    "header header header"
    "advert content content"
    "footer footer footer";

• 也可以不通过命名模板来设置单个网格的布局，即通过设置网格上下左右四根线条对应的横向和纵向起始线条来确定网格的位置和宽高，如`grid-area: 1/1/2/4"即高度从横向第一根线条开始，到第2根线条结束，宽度从纵向第一根线条开始，到第4根线条结束

grid布局

以下是这一部分习题的解答：

---

Introduction to the CSS Grid Challenges

• Create Your First CSS Grid

• Add Columns with grid-template-columns

• Add Rows with grid-template-rows

• Use CSS Grid units to Change the Size of Columns and Rows

• Create a Column Gap Using grid-column-gap

• Create a Row Gap using grid-row-gap

• Add Gaps Faster with grid-gap

• Use grid-column to Control Spacing

• Use grid-row to Control Spacing

• Align an Item Horizontally using justify-self

• Align an Item Vertically using align-self

• Align All Items Horizontally using justify-items

• Align All Items Vertically using align-items

• Divide the Grid Into an Area Template

• Place Items in Grid Areas Using the grid-area Property

• Use grid-area Without Creating an Areas Template

• Reduce Repetition Using the repeat Function

• Limit Item Size Using the minmax Function

• Create Flexible Layouts Using auto-fill

• Create Flexible Layouts Using auto-fit

• Use Media Queries to Create Responsive Layouts

• Create Grids within Grids