用CSS網格構建的8個常見網站布局

CSS網格的許多優點之一是它能夠輕松地創建復雜的布局。你不需要太多的代碼。不需要危險的黑客攻擊。一些相對簡單的行可以幫助您快速完成過去需要幾個小時的事情。

當然，CSS網格也是令人難以置信的強大的. 開發人員已經看到了一些極限。

雖然這令人印象深刻，但這個規范的真正優點在于它幫助我們完成日常任務。構成典型網站項目的常見頁面和功能布局。這是我們開始使用CSS網格的最大原因。

我們收集了8個常見的網站布局概念。每一個都展示了CSS網格如何使web設計者的生活更輕松。Flexbox和其他一些有關的技術也包括在內。我們開始吧！

發現布局的“圣杯”

乍一看，這種“圣杯”布局看起來并不難。事實上，我們已經看到它很多年了。問題一直是可用的CSS布局方法在設置時不是很有效。傳統上它需要黑客把它弄得恰到好處。CSS網格就不一樣了。CSS技巧組合配套文章在過程中

選擇卡片界面

卡片布局用戶界面現在是一件大事。有很多不同的方法讓它們與眾不同。這組示例展示了CSS網格如何使用相同的HTML標記并創建完全不同的外觀。

響應式多專欄博客

這里有一個吸引人的多欄博客布局，它很好地實現了空白。每一篇文章都有自己的閃光點。另外，它可以適應小屏幕而不會出現問題。這個布局也很容易擴展，列和行更多，只需對屬性進行一些調整(grid-template-columns ,網格模板行)走開