Grid布局

laznrbfe 發布于2019-08-30 11:00 / 3510人閱讀

摘要：布局是什么網格布局使我們能夠比以往任何時候都可以更靈活構建和控制自定義網格能夠將網頁分成具有簡單屬性的行和列來完成我們需要的網格布局。布局由兩個核心組成部分是父元素和子元素。是實際的網格，是網格內的內容。

Gird布局是什么？

Grid(網格) 布局使我們能夠比以往任何時候都可以更靈活構建和控制自定義網格 ; 能夠將網頁分成具有簡單屬性的行和列來完成我們需要的網格布局。

CSS Grid 布局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。

下面是一個父元素，內部包含6個子元素：

為了使其成為二維的網格容器，我們需要定義列和行：
創建3行(columns)2列(rows)

 .box{           
            display: grid;
            grid-template-columns: 50px 50px 50px;
            grid-template-rows: 50px 50px;
        }

grid-template-columns 創建列；創建幾列就在后面寫幾個值；
grid-template-rows 創建行；創建幾行就在后面寫幾個值；

效果圖為：

為了確保能正確理解這些值與網格外觀之間的關系，請看一下這個例子。

CSS代碼

.box{
          display: grid;
          grid-template-columns: 300px 150px 50px;
          grid-template-rows: 150px 50px;
        }

效果為：

是不是非常好理解，使用起來也非常簡單是不是？

覺得對您有幫助，麻煩您點個關注，如有不足，請多指教！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114714.html

翻譯 | CSS網格（CSS Grid）布局入門

摘要：瀏覽器兼容性網格布局從開始收到支持，微軟在會更新對網格布局的支持。微軟的瀏覽器和有一種比較舊的實現，所以有不少限制，我們會簡單介紹新的實現方式和老的實現方式之間的區別，這樣你能知道如何規避他們。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔校對者：珂珂、干干翻譯 | CSS網格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 評論0 收藏0
Grid布局——頁面布局如此簡單

摘要：網格單元格被劃分之后每一個格子就是單元格，也是布局的最小單位。網格區域若干個單元格拼接而成的區域。網格間隙單元格與單元格之間的距離，可以垂直也可以水平。前言 CSS網格布局用于將頁面分割成數個主要區域，或者用來定義組件內部元素間大小、位置和圖層之間的關系。像表格一樣，網格布局讓我們能夠按行或列來對齊元素。但是，使用CSS網格可能還是比CSS表格更容易布局。例如，網格容器的子元素可...

Scorpion 2019-08-30 15:55 評論0 收藏0
css grid布局入門

摘要：簡介網格布局又稱網格，是一種二維網格布局系統。在處理網頁布局方面一直做的不是很好。網格容器中的所有子元素就會自動變成網格項目網格線組成網格線的分界線。簡介 CSS網格布局（又稱網格），是一種二維網格布局系統。CSS在處理網頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內塊）布局，但是...

wzyplus 2019-08-29 17:06 評論0 收藏0
CSS Grid 讀書筆記

摘要：和絕對定位和絕對定位如果父容器有定位標識等，那么下面的子會根據原始它們應該布局的位置定位，反之如果父容器沒有定位標識，那么應用了會脫離布局，并且按照傳統的方式布局。基本概念 MDN上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...

liuhh 2019-04-23 13:22 評論0 收藏0
如何使用Flexbox和CSS Grid，實現高效布局

摘要：代碼如下頁面內容樣式接下來，將側邊欄和主內容區域使用一個包含起來。列和行布局部分橫跨所有的列。也可以使用簡寫，起始值和結束值位于同一行上，并用斜杠分隔。設計方法總結以上的布局設計中，使用了來進行整體布局以及設計中的非線性部分。 CSS 浮動屬性一直是網站上排列元素的主要方法之一，但是當實現復雜布局時，這種方法不總是那么理想。幸運的是，在現代網頁設計時代，使用 Flexbox 和 CSS...

eternalshallow 2019-08-29 13:29 評論0 收藏0
CSS Grid布局：網格單元格布局

摘要：基于網格線的占位區網格中的單元格是有網格線劃分出來的，那么在網格布局中，同樣可以使用網格線來給子元素設置占位區域。也就是說這四條網格線間的區域是一個單元格。 CSS Grid布局對于我等來說就是一個全新的布局，但國外很多同行朋友已對這種布局做了全面的探知。前面花了兩篇內容（《CSS Grid布局：什么是網格布局》和《[CSS Grid布局：瀏覽器開啟CSS Grid Layout]ht...

maxmin 2019-08-28 18:03 評論0 收藏0