一些CSS網格策略匹配設計模型

網絡開發的世界一直存在設計與開發的交接之間的差距。雄心勃勃的設計師希望他們努力看起來獨特而美麗（並符合他們最初的視野）的最終結果，而許多開發人員在結果中發現了更多的價值，該結果是一致，可靠且可靠且堅固的（並且易於編碼）。這種動態可能會導致雙方之間持續的緊張，雙方都希望以自己的方式引導事情。

儘管這種情況在某種程度上是不可避免的，但新的前端技術可以在使雙方更加靠近的情況下發揮作用。這樣的技術是CSS網格。這篇文章探討瞭如何將其用於編寫CSS樣式，以高度的保真度匹配設計佈局（沒有頭痛！）。

設計師向前端開發人員提供指導的一種常見方式是使用設計模型（通過模型，我們正在談論在草圖，XD，Illustrator，Photoshop等中內置的可交付成果）。所有設計師在某種程度上都有不同的工作方式（與開發人員一樣），但是許多人都喜歡將其佈局結構置於某種網格系統上。一致的網格系統對於傳達應如何編碼網頁以及在用戶屏幕的大小與模型的大小時應如何做出響應是無價的。作為開發人員，我非常感謝設計師會很麻煩地採用經過深思熟慮的網格系統。

12列佈局特別受歡迎，但其他模式也很常見。諸如Sketch和XD之類的軟件使創建頁面遵循預設列佈局非常簡單 - 您可以通過單擊按鈕打開和關閉覆蓋層。

一旦實現了網格系統，大多數設計元素應將其放置在其中。這種方法可確保塑造均勻排隊，並具有更具吸引力的外觀。除了視覺上具有吸引力外，可預測的網格還為開發人員提供了一個獨特的目標，可以在編寫樣式時拍攝。

不幸的是，這種基本模式在欺騙上很難準確編碼。諸如Bootstrap之類的框架通常用於創建網格佈局，但它們具有增加頁面重量和缺乏細粒度控制的缺點。 CSS網格為前端完美主義者提供了更好的解決方案。讓我們看一個例子。

上面的設計是網格的好應用。有一個14列模式，其中有多個元素。儘管盒子都具有不同的寬度和偏移，但它們都遵守相同的網格。該佈局可以使用Flexbox（甚至是Floats）製成，但這可能涉及一些非常特定的數學，以在所有斷點中獲得像素完美的結果。讓我們面對現實：許多前端開發人員對此沒有耐心。讓我們看一下更輕鬆地完成此類工作的三種CSS網格佈局策略。

策略1：基本網格

編寫均勻間隔的12列佈局的最直觀的方式可能是其中的某種變化。在這裡，外部容器用於控制左右填充的外部天溝間距，並使用內部行元件將內容限制為最大寬度。該行獲得了一些特定網格的樣式：

顯示：網格；
網格板柱：重複（12，1fr）;
網格間隙：20px;

該規則將網格定義為由12列組成，每個列具有一個分數單元（FR）的寬度。還指定了列之間20px的差距。使用列模板集，可以使用網格列屬性很容易地設置任何子列的開始和結尾。例如，設置網格列：3/8位置該元素從第三列開始，並跨越五列到第八列。

我們已經可以在此示例中看到CSS網格提供的內容很多，但是這種方法有一些局限性。一個問題是Internet Explorer，它不支持網格差距屬性。另一個問題是，這種12列方法無法在間隙開始時在間隙或末端列的末端啟動列的能力。為此，需要另一個系統。

策略2：更靈活的網格

儘管網格間隙可能是IE的，但可以通過將空格作為網格模板本身的一部分來重新創建縫隙的外觀。網格 - 板柱可用的重複功能不僅接受單個列寬作為參數，而且接受任意長度的重複模式。為此，可以重複11次列的模式，然後可以插入最終列以完成所需的12列 / 11內部間隙佈局：

網格板柱：重複（11，1fr 20px）1FR;

這圍繞IE問題，還允許在兩個列或間隙上啟動和結束列。雖然比以前的方法是一個很好的改進，但它仍然有一些生長空間。例如，如果要在屏幕外邊緣的一側放置一列，而另一側則擬合在網格系統中怎麼辦？這是一個例子：

在此佈局中，卡（我們的左列）開始並在網格中結束。主圖像（我們的右列）也開始在網格內，但延伸到屏幕邊緣的網格之外。為此編寫CSS可能是一個挑戰。一種方法可能是將圖像絕對放置並將其固定在右邊緣，但這是由於將其從文檔流中取出的缺點（如果圖像比卡高，這可能是一個問題）。另一個想法是使用Floats或Flexbox來維持文檔流，但這需要進行一些棘手的一次性計算，以使寬度和間距正確。讓我們看一個更好的方法。

策略3：更靈活的網格

該技術建立在上次修訂中引入的想法上。現在，我們沒有將網格存在於定義天溝大小和行寬度的其他元素中，而是將這些空間與網格的模式集成在一起。由於排水溝，列和間隙均已合併到模板中，因此可以使用網格柱屬性輕鬆而精確地將子元素放置在網格上。

 $行寬度：1140px;
$ gutter：30px;
$ GAP：20px;
$ BREAK：$ ROW寬度2 * $ Gutter;
$ COL-WIDTH-POST-BREAK ：（ $ Row寬度-11 * $ GAP） / 12;
  
。容器 {
  顯示：網格；
  網格 - 板塊列：$ gutter重複（11，calc（（100％-2 *＃{$ gutter} -11 *＃{$ gap}）/12）＃{$ gap}）
  @Media屏幕和（最小寬度：＃{$ break}）{
    網格 - 板列列：計算（0.5 *（100％ - ＃{$ row-row-width}））重複（11，＃{$ col-witth- post-break}＃{$ gap}）＃{$ col-width-post-break} calc（0.5 *（0.5 *）
  }
}

是的，需要一些數學才能使它正確。在實現行的最大寬度之前和之後，將模板設置不同很重要。我選擇為此使用SCSS，因為定義變量可以使計算更容易管理（更不用說其他開發人員更可讀了）。最初的12部分模式發展到了23部分的模式，並結合了11個內部間隙，現在是25件，佔左和右牙齦的佔25件。

關於這種方法的一件很酷的事情是，它可以用作設置模式後遵守網格的任何佈局的基礎，包括傳統上尷尬的佈局，其中涉及跨越外邊緣的列。此外，它是準確實施可能在優質模型中傳授的設計的直接方法。那應該使開發人員和設計師都開心！

有幾個警告...

儘管這些技術可用於破解傳統上尷尬的造型問題，但它們不是銀子彈。相反，應該將它們視為用於正確應用程序的替代工具。

第二和第三個佈局模式不合適的一種情況是需要自動放置的佈局。另一個是生產環境，需要支持與CSS網格相處不好的瀏覽器。

以上是一些CSS網格策略匹配設計模型的詳細內容。更多資訊請關注PHP中文網其他相關文章！