網(wǎng)絡(luò)開發(fā)的世界一直存在設(shè)計(jì)與開發(fā)的交接之間的差距。雄心勃勃的設(shè)計(jì)師希望他們努力看起來獨(dú)特而美麗（并符合他們最初的視野）的最終結(jié)果，而許多開發(fā)人員在結(jié)果中發(fā)現(xiàn)了更多的價(jià)值，該結(jié)果是一致，可靠且可靠且堅(jiān)固的（并且易于編碼）。這種動(dòng)態(tài)可能會(huì)導(dǎo)致雙方之間持續(xù)的緊張，雙方都希望以自己的方式引導(dǎo)事情。

盡管這種情況在某種程度上是不可避免的，但新的前端技術(shù)可以在使雙方更加靠近的情況下發(fā)揮作用。這樣的技術(shù)是CSS網(wǎng)格。這篇文章探討了如何將其用于編寫CSS樣式，以高度的保真度匹配設(shè)計(jì)布局（沒有頭痛?。?/p>

設(shè)計(jì)師向前端開發(fā)人員提供指導(dǎo)的一種常見方式是使用設(shè)計(jì)模型（通過模型，我們正在談?wù)撛诓輬D，XD，Illustrator，Photoshop等中內(nèi)置的可交付成果）。所有設(shè)計(jì)師在某種程度上都有不同的工作方式（與開發(fā)人員一樣），但是許多人都喜歡將其布局結(jié)構(gòu)置于某種網(wǎng)格系統(tǒng)上。一致的網(wǎng)格系統(tǒng)對(duì)于傳達(dá)應(yīng)如何編碼網(wǎng)頁以及在用戶屏幕的大小與模型的大小時(shí)應(yīng)如何做出響應(yīng)是無價(jià)的。作為開發(fā)人員，我非常感謝設(shè)計(jì)師會(huì)很麻煩地采用經(jīng)過深思熟慮的網(wǎng)格系統(tǒng)。

12列布局特別受歡迎，但其他模式也很常見。諸如Sketch和XD之類的軟件使創(chuàng)建頁面遵循預(yù)設(shè)列布局非常簡(jiǎn)單 - 您可以通過單擊按鈕打開和關(guān)閉覆蓋層。

一旦實(shí)現(xiàn)了網(wǎng)格系統(tǒng)，大多數(shù)設(shè)計(jì)元素應(yīng)將其放置在其中。這種方法可確保塑造均勻排隊(duì)，并具有更具吸引力的外觀。除了視覺上具有吸引力外，可預(yù)測(cè)的網(wǎng)格還為開發(fā)人員提供了一個(gè)獨(dú)特的目標(biāo)，可以在編寫樣式時(shí)拍攝。

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

上面的設(shè)計(jì)是網(wǎng)格的好應(yīng)用。有一個(gè)14列模式，其中有多個(gè)元素。盡管盒子都具有不同的寬度和偏移，但它們都遵守相同的網(wǎng)格。該布局可以使用Flexbox（甚至是Floats）制成，但這可能涉及一些非常特定的數(shù)學(xué)，以在所有斷點(diǎn)中獲得像素完美的結(jié)果。讓我們面對(duì)現(xiàn)實(shí)：許多前端開發(fā)人員對(duì)此沒有耐心。讓我們看一下更輕松地完成此類工作的三種CSS網(wǎng)格布局策略。

策略1：基本網(wǎng)格

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

顯示：網(wǎng)格；
網(wǎng)格板柱：重復(fù)（12，1fr）;
網(wǎng)格間隙：20px;

該規(guī)則將網(wǎng)格定義為由12列組成，每個(gè)列具有一個(gè)分?jǐn)?shù)單元（FR）的寬度。還指定了列之間20px的差距。使用列模板集，可以使用網(wǎng)格列屬性很容易地設(shè)置任何子列的開始和結(jié)尾。例如，設(shè)置網(wǎng)格列：3/8位置該元素從第三列開始，并跨越五列到第八列。

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

策略2：更靈活的網(wǎng)格

盡管網(wǎng)格間隙可能是IE的，但可以通過將空格作為網(wǎng)格模板本身的一部分來重新創(chuàng)建縫隙的外觀。網(wǎng)格 - 板柱可用的重復(fù)功能不僅接受單個(gè)列寬作為參數(shù)，而且接受任意長(zhǎng)度的重復(fù)模式。為此，可以重復(fù)11次列的模式，然后可以插入最終列以完成所需的12列 / 11內(nèi)部間隙布局：

網(wǎng)格板柱：重復(fù)（11，1fr 20px）1FR;

這圍繞IE問題，還允許在兩個(gè)列或間隙上啟動(dòng)和結(jié)束列。雖然比以前的方法是一個(gè)很好的改進(jìn)，但它仍然有一些生長(zhǎng)空間。例如，如果要在屏幕外邊緣的一側(cè)放置一列，而另一側(cè)則擬合在網(wǎng)格系統(tǒng)中怎么辦？這是一個(gè)例子：

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

策略3：更靈活的網(wǎng)格

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

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

是的，需要一些數(shù)學(xué)才能使它正確。在實(shí)現(xiàn)行的最大寬度之前和之后，將模板設(shè)置不同很重要。我選擇為此使用SCSS，因?yàn)槎x變量可以使計(jì)算更容易管理（更不用說其他開發(fā)人員更可讀了）。最初的12部分模式發(fā)展到了23部分的模式，并結(jié)合了11個(gè)內(nèi)部間隙，現(xiàn)在是25件，占左和右牙齦的占25件。

關(guān)于這種方法的一件很酷的事情是，它可以用作設(shè)置模式后遵守網(wǎng)格的任何布局的基礎(chǔ)，包括傳統(tǒng)上尷尬的布局，其中涉及跨越外邊緣的列。此外，它是準(zhǔn)確實(shí)施可能在優(yōu)質(zhì)模型中傳授的設(shè)計(jì)的直接方法。那應(yīng)該使開發(fā)人員和設(shè)計(jì)師都開心！

有幾個(gè)警告...

盡管這些技術(shù)可用于破解傳統(tǒng)上尷尬的造型問題，但它們不是銀子彈。相反，應(yīng)該將它們視為用于正確應(yīng)用程序的替代工具。

第二和第三個(gè)布局模式不合適的一種情況是需要自動(dòng)放置的布局。另一個(gè)是生產(chǎn)環(huán)境，需要支持與CSS網(wǎng)格相處不好的瀏覽器。

以上是一些CSS網(wǎng)格策略匹配設(shè)計(jì)模型的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！