## 一、電商網站  ### 1、淘寶布局 下圖包含：完整內容展示布局、瀏覽器縮小時內容展示布局。淘寶布局分為4列內容：1、2、3、4，在瀏覽器縮小的情況下，內容 3 被隱藏。  #### 柵格布局 * 完整內容展示布局：網頁總寬度為1200，列數為24，水槽為10。 * 瀏覽器縮小時內容展示布局：總寬度為990，列數為20，水槽為10。 在瀏覽器縮小時的柵格布局里，隱藏4列，內容2寬度變窄占10列，其他內容不變。  柵格布局設定后，可以很方便計算出每個模塊內容的寬度。  柵格的列數，根據具體內容設定。內容模塊較多，建議等分列數多一些，容易布局；如果內容模塊較少，等分列數也可以少一些，就像淘寶可以等分成24列，也可以等分成12列。  ### 2、京東布局 下圖包含：完整內容展示布局、瀏覽器縮小時內容展示布局。京東布局和淘寶布局一樣分為4列內容：1、2、3、4，在瀏覽器縮小的情況下，內容 3 被隱藏。  #### 柵格布局 * 完整內容展示布局：網頁總寬度為1200，列數為24，水槽為10； * 瀏覽器縮小時內容展示布局：總寬度為990，列數為20，水槽為10。 在瀏覽器縮小時的柵格布局里，隱藏4列，其他內容不變。  京東柵格布局，每個模塊內容的寬度如下圖。  柵格的列數，根據具體內容設定。京東網頁等分成24列，也可以等分成12列。