IT兄弟連 HTML5教程 柵格布局 柵格

• 2020 年 1 月 2 日
• 筆記

圖1 原始柵格圖

圖1上顯示的就是以前人為了保護某部份土地，特意用竹子包圍起該塊土地。我們把這種編織築起的竹子圍欄就稱之為籬笆或柵格。不管之前有沒有了解過柵格的讀者們，相信看了圖5.1所示，會對柵格這個詞有一個概念，就是用竹、木、鐵條等按照一定規律做成的阻攔物。我們可以隨意的編織不同類型的規律，可以做出菱形的、規矩的方型的、X型的、圓形等等。

不過，在網頁中，我們在眾多柵格類型規律中，選擇其中最經典的一款進行模仿，如圖2所示。

圖2 經典款柵格圖

之所以稱它為柵格中的經典款，就是因為它只是需要簡單的行列垂直水平相交就可以達到即整齊美觀又防禦的效果。

所以，我們在網頁中也可以選擇這種通過簡單的行列垂直水平相交就可以達到一個頁面美觀的效果，而且柵格化布局還可以很方便適配div盒子所佔寬度的比例，我們一般用grid進行命名。通過柵格布局這種結構，可以方便我們組織內容、易於瀏覽網站、降低用戶端負載。那麼現在我們就可以引入兩個概念：行「row」和列「column」。