grid布局：網格布局，通過在父元素上設定display:grid;來設定乙個網格容器，內部的子元素採用網格的方式進行布局。
fr單位：css自適應單位；在grid布局中如果一行分為四列，其中一列為固定width：100px，其他列都為1fr，那麼1fr=（100% - 100px）/ 3。
單元格：行和列形成的區域，類似**的單元格。
網格線：劃分單元格的線，類似**單元格之間的線。
屬性：（以下屬性都設定在容器上）
display：grid || inline-grid //grid=>grid容器區域是乙個塊級元素，會獨佔一行；inline-grid=>grid容器區域是個行類塊元素，會與其他容器併排顯示
grid-template-columns：100px 1fr 1fr；//設定三列元素，第一列寬為100px，其他兩列寬（100% - 100px）/ 2。如果設定了5列而實際只有三個元素也會預留位置；可以使用repeat(3,1fr)設定重複列。minmax(100px, 300px)設定寬度區間。
grid-template-row：100px 1fr；//設定行高，計算方式和列相同。
grid-auto-flow:columns || row;//預設元素按行排序渲染，設定為columns會按列排序渲染。
justify-items：start || end || center || …;//容器內的子元素在其網格內水平顯示方式：靠左，靠右，居中
align-items：start || end || center || …；//容器內子元素在其網格內垂直顯示方式：靠上，靠下，居中
justify-content：start || end || center || …//容器內整體子元素水平顯示方式
align-content：start || end || center || … //容器內整體子元素垂直顯示方式
grid-gap:10px 10px;//設定子元素之間上下左右的距離，不包含和父元素的距離
CSS grid布局相關筆記
優勢之處 固定或者彈性的軌道尺寸 定位專案 建立額外的軌道來儲存內容 對齊控制 控制重疊內容 grid vs flexbox 相容性相關概念 網格容器 grid container 和網格項 grid item class container class item onediv class item...
css grid布局使用
display grid 指定乙個容器採用網格布局 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 一 容器屬性 預設情況下 容器元素都是塊級元素，但也可以設定成行內元素 display inline block note 設定網格布局後，容器...
CSS Grid 網格 布局
grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...