CSS网格布局

FreeCodeCamp
, ,

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

通过设置父元素来搭建整体结构
  • 父元素设置为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来让子元素对应到父元素中的理想位置，如

    1
    2
    3
    4
    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

    1
    2
    3
    4
    5
    6
    7
    8
    .container {
      font-size: 40px;
      width: 100%;
      background: LightGray;
      /* add your code below this line */
      display: grid;
      /* add your code above this line */
    }

  • Add Columns with grid-template-columns

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    	.container {
        font-size: 40px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* add your code below this line */
        grid-template-columns: 100px 100px 100px;
        /* add your code above this line */
      }
    </style>

  • Add Rows with grid-template-rows

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
    	.container {
        font-size: 40px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        /* add your code below this line */
        grid-template-rows: 50px 50px;
        /* add your code above this line */
      }
    </style>

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
      .container {
        font-size: 40px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* modify the code below this line */
        
        grid-template-columns: 1fr 100px 2fr;
        
        /* modify the code above this line */
        grid-template-rows: 50px 50px;
      }
    </style>

  • Create a Column Gap Using grid-column-gap

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        /* add your code below this line */
        grid-column-gap: 20px;
        /* add your code above this line */
      }
    </style>

  • Create a Row Gap using grid-row-gap

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style>
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        /* add your code below this line */
        
        grid-row-gap: 5px;
        /* add your code above this line */
      }
    </style>

  • Add Gaps Faster with grid-gap

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        /* add your code below this line */
        grid-gap: 10px 20px;
        /* add your code above this line */
      }
    </style>

  • Use grid-column to Control Spacing

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
      .item5 {
        background: PaleGreen;
        /* add your code below this line */
        grid-column: 2/4;
        /* add your code above this line */
      }
    </style>

  • Use grid-row to Control Spacing

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
      .item5 {
        background: PaleGreen;
        grid-column: 2 / 4;
        /* add your code below this line */
        grid-row: 2/4;
        /* add your code above this line */
      }
    </style>

  • Align an Item Horizontally using justify-self

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
      .item2 {
        background: LightSalmon;
        /* add your code below this line */
        justify-self: center;
        /* add your code above this line */
      }
    </style>

  • Align an Item Vertically using align-self

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
      .item3 {
        background: PaleTurquoise;
        /* add your code below this line */
        align-self: end;
        /* add your code above this line */
      }
    </style>

  • Align All Items Horizontally using justify-items

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style>
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 10px;
        /* add your code below this line */
        justify-items: center;
        /* add your code above this line */
      }
    </style>

  • Align All Items Vertically using align-items

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style>
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 10px;
        /* add your code below this line */
        align-items: end;
        /* add your code above this line */
      }
    </style>

  • Divide the Grid Into an Area Template

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 10px;
        /* change code below this line */
        
        grid-template-areas:
          "header header header"
          ". content content"
          "footer footer footer";
        /* change code above this line */
      }
    </style>

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

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
      .item5 {
        background: PaleGreen;
        /* add your code below this line */
        grid-area: footer;  
        /* add your code above this line */
      }
    </style>

  • Use grid-area Without Creating an Areas Template

    1
    2
    3
    4
    5
    6
    7
    8
    <style>
      .item5 {
        background: PaleGreen;
        /* add your code below this line */
        grid-area:3/1/4/4;
        /* add your code above this line */
      }
    </style>

  • Reduce Repetition Using the repeat Function

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* change the code below this line */
        
        grid-template-columns: repeat(3, 1fr);;
        
        /* change the code above this line */
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 10px;
      }
    </style>

  • Limit Item Size Using the minmax Function

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
      .container {
        font-size: 40px;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* change the code below this line */
        
        grid-template-columns: repeat(3, minmax(90px, 1fr));
        
        /* change the code above this line */
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 10px;
      }
    </style>

  • Create Flexible Layouts Using auto-fill

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
      .container {
        font-size: 40px;
        min-height: 100px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* change the code below this line */
        
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        
        /* change the code above this line */
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 10px;
      }
    </style>

  • Create Flexible Layouts Using auto-fit

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
      .container2 {
        font-size: 40px;
        min-height: 100px;
        width: 100%;
        background: Silver;
        display: grid;
        /* change the code below this line */
        
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        
        /* change the code above this line */
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 10px;
      }
    </style>

  • Use Media Queries to Create Responsive Layouts

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
      @media (min-width: 400px){
        .container{
          /* change the code below this line */
      
          grid-template-areas:
            "header header"
            "advert content"
            "footer footer";
        
        /* change the code above this line */
        }
      }
    </style>

  • Create Grids within Grids

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
      .item3 {
        background: PaleTurquoise;
        grid-area: content;
        /* enter your code below this line */
        display:grid;
        grid-template-column: auto 1fr;
        
        /* enter your code above this line */
      }
    </style>