CSS 網格指南:使用網格屬性掌握佈局
使用複雜佈局時，在網頁上定位元素可能非常複雜。這就是 CSS 網格派上用場的地方。它是一個佈局系統，旨在簡化創建複雜佈局的過程。
與傳統佈局技術相比，使用 CSS 網格具有獨特的優勢，允許在二維框架內將元素放置在行和列中。與僅限於單一維度的更具限制性的替代方案相比，這種靈活的佈置增強了設計過程。
網格容器和項目
使用 CSS 網格時，可以將其屬性套用於父元素或子元素。透過將父元素上的display屬性設為"grid"，它會轉換為網格容器，任何後續的子元素隨後都會成為網格項目並繼承指定的網格屬性。
它的表示方式如下:
網格元素本身能夠轉變為網格容器。這種配置稱為巢狀網格結構，其中一個網格存在於另一個網格中。在這種情況下，主網格容器被指定為外部網格，而轉換後的元素則承擔內部網格的角色。
各個網格彼此獨立運作；因此，分配給內部網格的屬性對外部網格的排列沒有影響，反之亦然。
它看起來像這樣:
當努力精確地建構連貫的二維排列時，深入理解網格容器及其內容之間的相互作用是必不可少的。
請注意，網格容器有自己的一組屬性，而與網格項目相關的屬性與它們不同。
網格線和軌道
在深入研究 CSS Grid 的使用之前，有必要全面了解兩個基本概念:
網格線表示水平線和垂直線，它們透過定義行和列的起點和終點來建立 CSS 網格佈局的結構。與實體盒子的邊緣類似，這些線具有用於在網格系統內精確放置的數值。插圖描繪了一條紅色虛線，表示網格線的存在。
⭐ 
網格軌道:它們是定義行和列的網格線之間的間隙。它們就像網格佈局的構建塊。在上圖中，每個項目中的彩色區域代表網格軌道。
將網格線和軌道視為類似方格紙上的線條，作為網格佈局的基礎。當水平網格線與垂直網格線混合時，會產生一個矩形單元，該單元充當放置網格元素的外殼。
CSS 網格容器屬性
此外，還有其他 CSS 屬性，可用於實現視覺元素及其在網頁上對應位置的和諧分佈。其中一些包括:
網格模板
本屬性調節行和列的尺寸，其可根據像素、百分比或分數來決定。此外，諸如“auto”、“minmax”、“repeat”等各種關鍵字可用於增加多功能性。
⭐grid-template-rows:設定行高。
⭐grid-template-columns:定義列寬。
這裡有些例子:
使用像素:
.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}
使用百分比:
.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}
使用 fr:
.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}
使用 auto 和 minmax() 關鍵字:
.grid-container {
grid-template-columns: auto minmax(150px, 1fr) auto;
grid-template-rows: 100px auto;
}
使用repeat()來實現一致的大小調整:
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}
自動放置與網格範本區域
自動放置允許在網格系統內自動排列項目，無需使用者提供特定的定位或組織。相反，網格根據項目在原始程式碼中列出的順序透過演算法確定最佳放置位置。在需要在佈局中均勻分佈大量元素的情況下，此功能特別有用，無需手動幹預即可有效利用可用空間。
網格模板區域透過定義由各自名稱標識的特定區域或“區域”，充當在網格容器內組織和建構內容的框架。這些命名區域的功能類似於建築藍圖中的房間標籤，允許設計人員根據指定的區域引用將位置指派給網格元素。透過利用這種方法，開發人員可以更輕鬆和靈活地創建複雜且精確的佈局結構。
.grid-container {
grid-template-areas:'header header header header'
'sidebar main main right'
'sidebar content content right'
'footer footer footer footer';
}
本配置展示了包括三列和四行的矩陣。它包含兩行作為主要內容區域。指定區域包括「頁首」、「側邊欄」、「內容」和「頁尾」。隨後，我們將深入研究在每個網格元素的屬性中使用這些區域指定的複雜性。
CSS 網格中的對齊方式
您可以利用對齊屬性來調整網格元素在其各自網格單元內的位置。這些屬性包括:
⭐ justify-items:控制網格單元內項目的水平對齊。
感興趣的值是與該資料集相關的起點、終點、中心位置和延伸程度。
⭐align-items:控制網格單元內項目的垂直對齊。
在這種情況下，感興趣的值是起點、終點、中心位置以及與這些參數相關的彈性程度。
⭐ justify-content:沿著水平軸對齊容器內的整個網格。
可用於設定標記簇實例之間間距的值包括「start」、「end」、「center」、「stretch」、「space-Between」、「space-around」和「space-evenly」 」。
⭐align-content:沿著垂直軸對齊容器內的整個網格。
可用於控制彈性容器中專案間距的數值包括「start」、「end」、「center」、「stretch」、「space-Between」、「space-around」和「space-evenly」。
這是一個例子:
.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}
集中化是透過在整個網格的所有列之間均勻分配空間來實現的，每個項目都位於其各自單元格內水平和垂直的中心。由此產生的排列確保網格呈現平衡佈置，相鄰元素之間的間距相等，同時保持與父容器的垂直軸對齊的直立方向。
網格間隙
網格間隙，也稱為單元格間距或元素間距，屬於網格佈局的行和列之間存在的開放區域。此設計方面用於在視覺上區分網格內的相鄰元素，並為每個單獨的項目提供一些呼吸空間。
grid-gap 屬性允許指定網格元素之間沿行軸和列軸的間距，使用一系列單位，包括像素 (px)、百分比 (%) 和 em 單位 (em)。
.grid-container {
grid-gap: 20px;
}
本實例由一個網格容器組成，該容器具有兩列，兩列間隔二十個像素的邊距。這樣的安排可以在視覺和佈局上區分柱子，從而增強其獨特性。
CSS 網格項目屬性
當然！此簡報概述了控制 CSS 網格排列中各個項目的行為的幾個關鍵特徵，並附有說明性實例:
網格行開始和網格行結束:
給定元素的起始行和結束行索引由此屬性指定。
跨度的值可以包括行號，例如“跨度n”，或者可以使用“自動”設定將它們設定為根據螢幕的大小自動調整。
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}
給定的程式碼將網格項目 1 定位在行範圍內，從第二行的垂直對齊延伸到第四行的相應位置。
網格列開始和網格列結束:
範圍函數用於定義表或工作表中特定項目的起始列號和結束列號。這允許您指定在引用資料時應包含資料的哪一部分，無論是用於顯示目的還是作為公式計算的一部分。
值可以採用多種形式，例如行號、“span n”或“auto”。
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}
給定的程式碼以跨越三列的方式定位網格項目 2，從第一列的初始行開始，到第二列的最後一行結束。
網格區域:
CSS 屬性 grid-template-areas 允許透過各自的名稱引用特定的網格線來指定網格容器內元素的尺寸和位置。
當然！目前透過「grid-template-areas」屬性的實現促進了預定區域標籤的利用。其與「grid-area」屬性整合的示範如下:
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}
結果如下:
自我辯護:
單元格內各個項目的水平對齊是透過沿著水平軸對齊它們來實現的。這可以使用各種格式選項來完成，例如文字對齊或表格屬性設定。實現此目的的具體方法將取決於使用該方法的特定應用程式的上下文和要求。
圖形設計中的值包含一系列可能性，包括位於元素軌蹟的起點或終點，作為其他元素圍繞其旋轉的中心點，或延伸到設定的邊界之外以創造彈性。這些不同的位置可以產生不同的視覺效果，有助於整體構圖。
.grid-item-5 {
justify-self: center;
}
給定的程式碼將第五個網格項目（Grid Item 5）以水平方式對齊在網格佈局中其對應單元格的中心。
自我對齊:
更改列中每個項目的對齊方式，以便它們在各自的單元格內垂直放置。
數值可以採用各種形式，例如起點、終點、中心參考或超出其典型範圍的方法。
.grid-item-1 {
align-self: end;
}
這段特定的程式碼將「網格項目 1」進行定向和定位，使其位於各自網格單元內的最低點。
我們鼓勵您透過結合使用各種風格屬性來對各個網格項目的視覺呈現進行創意控制，從而實現與所需設計目標相符的美感。
使用 CSS 網格建立響應式佈局
採用 CSS 網格系統對於製作響應式設計至關重要，這些設計可以輕鬆適應不同的顯示尺寸和小工具，確保在不同的螢幕尺寸和裝置上提供流暢的使用者體驗。您可以使用多種技術來有效地實現此目標。
將媒體查詢與 CSS 網格佈局結合使用可以根據螢幕尺寸實現自適應回應。這使得網頁設計師和開發人員能夠根據不同的顯示尺寸動態修改網格元素的排列並調整列寬，從而確保在不同裝置和解析度下獲得最佳的觀看體驗。
利用百分比值和“fr”等靈活的度量，以便允許網格元素和列的響應式縮放，與可用空間成比例。
利用 minmax() 函數建立網格單元的尺寸範圍，透過防止內容變得過小或過大來提高各種螢幕解析度的可讀性和相容性。
請修改提供的文本，以更精緻的方式傳達相同的訊息。在定制列的尺寸、網格元素之間的間距、字體和空白時，保持整個設計的一致性至關重要，以便在不同平台上獲得最佳觀看效果。
探索 CSS 網格佈局的可能性
透過利用 CSS 網格的多功能性和強大功能，人們可以創建美觀且無縫的佈局，既滿足視覺吸引力又滿足當代網頁設計不斷變化的要求。因此，深入研究網格領域，研究它們的潛力，並提高您在 Web 開發方面的熟練程度。
在探索各種佈局技術時，將 CSS Grid 與 Flexbox 等替代方法進行比較通常是有益的。 CSS Flexbox 模組提供了一種方法，透過該方法，人們可以評估和確定最適合其特定專案中特定設計要求的方法。