CSS, Visual Learning, Web Dev, Notes —

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

You might also like...