CSS網格佈局

weixin_34291004發表於2018-06-28
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根線條結束
9240001-8bc6d14907e80775.png
grid佈局

以下是這一部分習題的解答：

Introduction to the CSS Grid Challenges

  • Create Your First CSS Grid

    <style> 
  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    /* add your code below this line */
    display: grid;
    /* add your code above this line */
  }
</style>

  • Add Columns with grid-template-columns

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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

    <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>

相關文章