🖥️ Learn CSS Grid the easy way | Kevin Powell

🖥️ Learn CSS Grid the easy way | Kevin Powell
Photo by NordWood Themes / Unsplash

source: https://www.youtube.com/watch?v=rg7Fvvl3taU

⚙️ æ–¹æ³•1

從攏統開始,除非需要特別指定,才處理特別之處,簡化設計。

  • grid-template-columns

    .testimonial-grid {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(3, 1fr);
    }
    
  • grid-template-rows 盡量不用, 讓它自己長 (隱式網格,Implicit Grid Rows),簡化設計

  • gap

    grid-row-gap: 20px;
    grid-colume-gap: 10px;
    
    /* or */
    gap: 20px 10px; /* Different row and column gaps */
    
    /* or */
    gap: 1.5rem;
    
  • span (在 grid item 上)

    .grid-col-span-2 {
       grid-column: span 2;
    }
    
    <article class="testimonial grid-col-span-2 ...">
    
  • 處理特別的卡片,個別指定開始跟結束

    .testimonial:last-child {
      grid-column-start: 4;
      grid-column-end: 5;
      grid-row-start: 1;
      grid-row-end: 3; /* or span 2 */
    }
    
    /* or 縮寫 */
    .testimonial:last-child {
      grid-column: 4 / 5;
      grid-row: 1 / 3; /* or 1 / span 2 */
    }
    
  • media query (mobile first)

    • @media (min-width: 40em) {} 表示當螢幕寬度大於或等於 40em 時套用樣式。這是使用 min-width 的情況。
    • 在 mobile-first 設計中,通常會使用 min-width,因為一開始的樣式是針對較小的螢幕(例如手機)設計的,然後使用媒體查詢逐漸增加樣式以適應較大的螢幕。因此,一開始的樣式將不帶有媒體查詢,而後續的樣式將使用 min-width 來確保它們只在螢幕寬度超過特定值時套用。
  • 💪💪💪 Final

    @media (min-width: 40em) {
      .grid-col-span-2 {
         grid-column: span 2;
      }
    
      .testimonial-grid {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: repeat(4, 1fr);
      }
      
      .testimonial:last-child {
        grid-column-start: 4;
        grid-row: 1 / span 2;
      }
    }
    
  • 🔥 ä½¿ç”¨ Tailwind CSS 達到同樣效果

    <div class="grid-container grid grid-cols-1 gap-4 md:grid-cols-4">
      <div class="itm border-2 md:col-span-2">1</div>
      <div class="itm border-2">2</div>
      <div class="ite border-2">3</div>
      <div class="ite border-2 md:col-span-2">4</div>
      <div class="ite border-2 md:col-start-4 md:row-span-2 md:row-start-1">5</div>
    </div>
    

⚙️ æ–¹æ³•2

  • grid-template-areas

    • grid-template-areas 屬性用於定義 CSS Grid 的區域佈局。
    • 透過指定區域名稱,可以輕鬆地組態子元素的位置。
    • 在 .testimonial-grid 中,使用了五個區域名稱 one, two, three, four, five 來定義區域。
    • 注意最後的分號🔥。
  • nth-child() 這部分如果不設定,會錯位

    • nth-child() 是 CSS 選擇器中的一種,用於選擇父元素的特定子元素。
    • 在這裡,.testimonial:nth-child(n) 被用來選擇 .testimonial 元素中的第 n 個子元素,並且透過 grid-area 屬性指定它們在 grid 中的區域。
    • 如果移除了 .testimonial:nth-child(n) 選擇器中的 grid-area 屬性,將會影響到 grid 的佈局。在這個特定的情境中,.testimonial-grid 使用了 grid-template-areas 來定義區域佈局,而 .testimonial:nth-child(n) 選擇器被用來將特定的 .testimonial 元素放置到相應的區域。
    • 如果省略了 grid-area,.testimonial 元素將不會被對應到指定的區域,而是預設將它們按照正常的流動放置在 grid 中。這可能會導致 grid 的佈局混亂,因為沒有確定每個 testimonial 應該放置在哪個區域。
    • 簡而言之,.testimonial 元素的位置不再受到 grid-template-areas 的影響,它們將按照正常文檔流的方式排列。這可能會使得原本為每個 testimonial 定義的區域佈局失效,並可能造成不符合預期的外觀。
  • grid-auto-columns 讓 column 等寬,不然就會自然流動分配

    • 如果移除了 .testimonial-grid 中的 grid-auto-columns 屬性,則將影響到自動生成欄的寬度。在這裡,grid-auto-columns: 1fr; 的設置表示自動生成的欄寬度均為 1fr。
    • 如果省略了 grid-auto-columns,則自動生成的欄將使用預設的欄寬度。這可能會影響到該 grid 的外觀,特別是當沒有明確定義欄寬度時,欄的寬度可能會被內容的寬度所影響。
    • 簡而言之,grid-auto-columns 的存在有助於明確指定自動生成的欄的寬度,而省略它將使用默認值。具體影響取決於其他樣式規則和內容的特性,但在這個例子中,可能會導致 grid 的欄寬度不如預期。
  • 💪💪💪 Final

    .testimonial-grid {
      display: grid;
      gap: 1.5rem;
      grid-auto-columns: 1fr; /* 🔥 */
      grid-template-areas:
        'one'
        'two'
        'three'
        'four'
        'five'; /* don't forget */
    }
    
    .testimonial:nth-child(1) {
      grid-area: one;
    }
    .testimonial:nth-child(2) {
      grid-area: two;
    }
    .testimonial:nth-child(3) {
      grid-area: three;
    }
    .testimonial:nth-child(4) {
      grid-area: four;
    }
    .testimonial:nth-child(5) {
      grid-area: five;
    }
    
    @media (min-width: 50em) {
      .testimonial-grid {
        grid-template-areas:
          'one one two five'
          'three four four five';
      }
    }
    

CodePen