正在改變網頁設計的新 CSS 功能

曾經有一段時間，網頁設計變得單調。 設計師和開發人員一遍又一遍地構建相同類型的網站，以至於我們被業內人士嘲笑只創建了兩種類型的網站：

您目前正在設計兩個可能的網站中的哪一個？ pic.twitter.com/ZD0uRGTqqm

— 喬恩·戈爾德 (@jongold) 2016 年 2 月 2 日

這是我們“創造性”思維所能達到的極限嗎？ 這個念頭，讓我的心中湧起一股無法抑制的悲傷。

我不想承認，但也許那是我們當時能做到的最好的事情。 也許我們沒有合適的工具來進行創意設計。 網絡的需求正在迅速發展，但我們卻被花車和表格等古老的技術所困。

今天，設計格局已經完全改變。 我們配備了新的和強大的工具——CSS Grid、CSS 自定義屬性、CSS 形狀和 CSS writing-mode等等——我們可以用來鍛煉我們的創造力。

CSS Grid 如何改變一切

網格對於網頁設計是必不可少的； 你已經知道了。 但是你有沒有停下來問自己你是如何設計你主要使用的網格的？

我們大多數人都沒有。 我們使用已成為行業標準的 12 列網格。

• 但是為什麼我們使用相同的網格呢？
• 為什麼網格由 12 列組成？
• 為什麼我們的網格大小相同？

以下是我們為什麼使用相同網格的一個可能答案：我們不想做數學。

過去，使用基於浮點的網格，要創建三列網格，您需要計算每列的寬度、每個間距的大小以及如何定位每個網格項。 然後，您需要在 HTML 中創建類以適當地設置它們的樣式。 這很複雜。

為了讓事情變得更簡單，我們採用了網格框架。 一開始，960gs 和 1440px 等框架允許我們在 8 列、9 列、12 列甚至 16 列網格之間進行選擇。 後來，Bootstrap 贏得了框架大戰。 因為 Bootstrap 只允許 12 列，而改變這一點很痛苦，我們最終選擇了 12 列作為標準。

但我們不應該責怪 Bootstrap。 這是當時最好的方法。 誰不想要一個用最少的努力就能工作的好解決方案？ 隨著網格問題的解決，我們將注意力轉向了設計的其他方面，例如排版、顏色和可訪問性。

現在，隨著 CSS Grid 的出現，網格變得更加簡單。 我們不再需要害怕網格數學。 它變得如此簡單，以至於我認為使用 CSS 創建網格比使用 Sketch 等設計工具更容易！

為什麼？

假設您要製作一個 4 列網格，每列大小為 100 像素。 使用 CSS Grid，您可以在grid-template-columns聲明中寫四次100px ，然後將創建一個 4 列的網格。

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

如果你想要一個 12 列的網格，你只需要重複100px 12 次。

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

是的，代碼並不漂亮，但我們並不關心代碼質量的優化（目前）——我們仍在考慮設計。 CSS Grid 讓任何人（即使是沒有編碼知識的設計師）都可以輕鬆地在 Web 上創建網格。

如果要創建具有不同寬度的網格列，只需在grid-template-columns聲明中指定所需的寬度，就可以了。

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

使網格響應

如果不討論響應方面，任何關於 CSS 網格的討論都是不完整的。 有幾種方法可以使 CSS Grid 響應式。 一種方法（可能是最流行的方法）是使用fr單位。 另一種方法是使用媒體查詢更改列數。

fr是表示分數的靈活長度。 當您使用fr單位時，瀏覽器會劃分開放空間並根據fr倍數將區域分配給列。 這意味著要創建四個大小相等的列，您將寫入1fr四次。

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

讓我們做一些計算來理解為什麼要創建四個大小相等的列。

首先，假設網格可用的總空間為1260px 。

在為每列分配寬度之前，CSS Grid 需要知道有多少可用空間（或剩餘空間）。 在這裡，它從1260px中減去了grip-gap聲明。 由於每個間隙20px ，我們剩下1200px的可用空間。 (1260 - (20 * 3) = 1200) 。

接下來，它將fr倍數相加。 在這種情況下，我們有四個1fr倍數，因此瀏覽器將1200px除以 4。 因此，每列是300px 。 這就是為什麼我們得到四個相等的列。

但是，使用fr單位創建的網格並不總是相等的！

使用fr時，您需要注意每個fr單位是可用（或剩餘）空間的一小部分。

如果您的元素比使用fr單位創建的任何列寬，則需要以不同的方式進行計算。

例如，下面的網格有一個大列和三個小（但相等）列，即使它是使用grid-template-columns: 1fr 1fr 1fr 1fr 。

在將1200px分成四個並為1fr列中的每一列分配300px之後，瀏覽器意識到第一個網格項包含一個1000px的圖像。 由於1000px大於300px ，瀏覽器選擇將1000px分配給第一列。

這意味著，我們需要重新計算剩餘空間。

新的剩餘空間為1260px - 1000px - 20px * 3 = 200px ； 然後根據剩餘分數的數量將這200px除以三。 然後每個分數是66px 。 希望這可以解釋為什麼fr單位並不總是創建等寬的列。

如果您希望fr單元每次都創建等寬列，則需要使用minmax(0, 1fr)強制它。 對於這個特定示例，您還需要將圖像的max-width屬性設置為 100%。

注意： Rachel Andrew 寫了一篇關於不同 CSS 值（min-content、max-content、fr 等）如何影響內容大小的精彩文章。 值得一讀！

不等寬網格

要創建寬度不等的網格，您只需改變 fr 倍數。 下面是一個遵循黃金比例的網格，其中第二列是第一列的 1.618 倍，第三列是第二列的 1.618 倍。

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

在不同的斷點更改網格

如果你想在不同的斷點改變網格，你可以在媒體查詢中聲明一個新的網格。

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

用 CSS Grid 創建網格不是很容易嗎？ 早期的設計師和開發人員會因為這種可能性而死。

基於高度的網格

以前不可能根據網站的高度製作網格，因為我們無法判斷視口的高度。 現在，有了視口單元、CSS Calc 和 CSS Grid，我們甚至可以根據視口高度製作網格。

在下面的演示中，我根據瀏覽器的高度創建了網格方塊。

Jen Simmons 有一個很棒的視頻，它討論了第四個邊緣的設計——使用 CSS Grid。 我強烈建議您觀看。

網格項目放置

在過去，定位網格項目是一件很痛苦的事情，因為您必須計算margin-left屬性。

現在，使用 CSS Grid，您可以直接使用 CSS 放置網格項目，而無需額外的計算。

 .grid-item { grid-column: 2; /* Put on the second column */ } 

您甚至可以使用span關鍵字告訴網格項它應該佔用多少列。

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

啟示

CSS Grid 使您可以輕鬆地進行佈局，以便您可以快速創建同一網站的許多變體。 一個典型的例子是 Lynn Fisher 的個人主頁。

如果您想了解更多關於 CSS Grid 可以做什麼的信息，請查看 Jen Simmon 的實驗室，她在那裡探索如何使用 CSS Grid 和其他工具創建不同類型的佈局。

要了解有關 CSS 網格的更多信息，請查看以下資源：

• 掌握 CSS Grid，Rachel Andrew 和 Jen Simmons 視頻教程
• Layout Land, Jen Simmons 一系列關於佈局的視頻
• CSS 佈局研討會，Rachel Andrew 一個 CSS 佈局課程
• Learn CSS Grid, Jonathan Suh 關於 CSS Grid 的免費課程。
• Grid critters, Dave Geddes 學習 CSS Grid 的有趣方式

不規則形狀設計

我們習慣於在 Web 上創建矩形佈局，因為 CSS 盒子模型是一個矩形。 除了矩形，我們還找到了創建簡單形狀的方法，例如三角形和圓形。

今天，我們不必止步於此。 使用 CSS 形狀和clip-path ，我們可以毫不費力地創建不規則形狀。

例如，Aysha Anggraini 使用 CSS Grid 和clip path嘗試了漫畫風格的佈局。

Hui Jing 解釋瞭如何使用 CSS 形狀以允許文本沿著 Beyonce 曲線流動。

如果您想深入挖掘，Sara Soueidan 有一篇文章可以幫助您創建非矩形佈局。

CSS 形狀和clip-path為您提供了創建設計獨特的自定義形狀的無限可能性。 不幸的是，在語法方面，CSS 形狀和clip-path不如 CSS Grid 直觀。 幸運的是，我們有諸如 Clippy 和 Firefox 的形狀路徑編輯器之類的工具來幫助我們創建我們想要的形狀。

使用 CSS 的writing-mode切換文本流

我們習慣於在網絡上看到單詞從左到右流動，因為網絡主要是為講英語的人製作的（至少它是這樣開始的）。

但是有些語言並沒有朝著那個方向發展。 例如，中文單詞可以從上到下和從右到左閱讀。

CSS 的writing-mode使文本按照每種語言的本機方向流動。 慧靜在一個名為 Penang Hokkien 的網站上嘗試了一種從上到下、從右到左的中文佈局。 你可以在她的文章“關於家庭的那個”中閱讀更多關於她的實驗的信息。

除了文章，慧靜還有一篇關於排版和writing-mode的精彩演講，“當東方遇見西方：網頁排版及其如何激發現代佈局”。 我強烈建議您觀看。

即使你不為像中文這樣的語言設計，但這並不意味著你不能將 CSS 的writing-mode應用到英文。 早在 2016 年，當我創建 Devfest.asia 時，我發揮了一點創意力量，並選擇使用writing-mode旋轉文本。

Jen Simmons 的實驗室也包含許多關於writing-mode的實驗。 我也強烈建議您檢查一下。

努力和獨創性大有作為

即使新的 CSS 工具很有幫助，您也不需要其中任何一個來創建獨特的網站。 一點獨創性和一些努力會有很長的路要走。

例如，在 Super Silly Hackathon 中，Cheaun 將整個網站旋轉 -15 度，讓你在閱讀網站時看起來很傻。

Darin Senneff 用一些三角函數和 GSAP 製作了一個動畫登錄頭像。 看看這只猿有多可愛，當你專注於密碼字段時，它是如何遮住眼睛的。 與交互式登錄表單類似，還有一個非常棒的交互式計算器，可幫助估算使用 JustEat 等外部服務時損失的收入金額！

當我為我的課程 Learn JavaScript 創建銷售頁面時，我添加了讓 JavaScript 學習者感到賓至如歸的元素。

包起來

獨特的網頁設計不僅僅是佈局。 這是關於設計如何與內容相結合。 只要稍加努力和獨創性，我們所有人都可以創造出獨特的設計來與我們的觀眾交流。 我們今天使用的工具使我們的工作更輕鬆。

問題是，您是否足夠在意做出獨特的設計？ 我希望你會。