隨著技術(shù)不斷的發(fā)展，在網(wǎng)站設(shè)計(jì)制作領(lǐng)域已經(jīng)發(fā)生了天翻地覆的變化。我們配備了強(qiáng)大的新工具——CSS網(wǎng)格、CSS自定義屬性、CSS形狀和CSS書寫模式等等可以用來鍛煉我們的創(chuàng)造力。

曾經(jīng)有一段時(shí)間，網(wǎng)頁設(shè)計(jì)變得單調(diào)乏味。設(shè)計(jì)師和開發(fā)人員一遍又一遍地建立相同類型的網(wǎng)站，以至于市面上到處是類似的模板站和仿站。這是我們“創(chuàng)造性”思維所能達(dá)到的極限嗎？這種想法讓我內(nèi)心感到一陣無法控制的悲傷。

我不想承認(rèn)，但也許那是我們當(dāng)時(shí)能做到的最好的了。也許我們沒有合適的工具來進(jìn)行創(chuàng)造性的設(shè)計(jì)。網(wǎng)絡(luò)的需求發(fā)展很快，但是我們?nèi)匀煌Ａ粼诠爬系募夹g(shù)上，比如浮動(dòng)和表格。今天設(shè)計(jì)領(lǐng)域已經(jīng)完全改變了。我們配備了新的強(qiáng)大的工具-CSS網(wǎng)格，CSS自定義屬性，CSS形狀和CSSwriting-mode舉幾個(gè)例子，我們可以用它來鍛煉我們的創(chuàng)造力。

網(wǎng)格對(duì)于網(wǎng)頁設(shè)計(jì)是必不可少的；你已經(jīng)知道了。但是你有沒有停下來問問自己，你是如何設(shè)計(jì)你主要使用的網(wǎng)格的？在過去對(duì)于基于浮動(dòng)的網(wǎng)格，要?jiǎng)?chuàng)建一個(gè)三列網(wǎng)格，您需要計(jì)算每列的寬度、每個(gè)裝訂線的大小以及如何定位每個(gè)網(wǎng)格項(xiàng)目。然后您需要在HTML中創(chuàng)建類來適當(dāng)?shù)卦O(shè)置它們的樣式，它是相當(dāng)復(fù)雜。

為了使事情更簡(jiǎn)單，我們采用了網(wǎng)格框架。一開始，諸如960gs和1440像素允許我們?cè)?列、9列、12列甚至16列網(wǎng)格之間進(jìn)行選擇。后來，Bootstrap贏得了框架之戰(zhàn)。因?yàn)锽ootstrap只允許12列，而改變它是一件痛苦的事情，所以我們最終決定將12列作為標(biāo)準(zhǔn)。但我們不應(yīng)該責(zé)怪Bootstrap。這是當(dāng)時(shí)最好的方法。誰不想要一個(gè)省力的好解決方案呢？隨著網(wǎng)格問題的解決，我們把注意力轉(zhuǎn)向了設(shè)計(jì)的其他方面，比如字體、顏色和可訪問性。

現(xiàn)在隨著CSS網(wǎng)格的出現(xiàn)，網(wǎng)格變得簡(jiǎn)單多了。我們?cè)僖膊挥煤ε戮W(wǎng)格數(shù)學(xué)了。它變得如此簡(jiǎn)單，以至于我認(rèn)為用CSS創(chuàng)建一個(gè)網(wǎng)格比用Sketch這樣的設(shè)計(jì)工具更容易！