** fr 簡介及例項
網格布局支援彈性尺寸（flex-size），這是乙個很好的自適應布局技術。
fr是乙個相對尺寸單位，表示剩餘空間做等分，此項分配到的百分比(如果只有乙個項使用此單位，那就佔剩餘空間的100%，所以多個項聯合使用更有意義)
彈性尺寸使用fr尺寸單位，其來自 「fraction」 或 「fractional unit」 單詞的前兩個字母，表示整體空間的一部分。
css**示例
#grid
#title
#score
#stats
#message
div
"grid"
>
"title"
>
site logodiv
>
"score"
>
slogandiv
>
"stats"
>
user zonediv
>
"message"
>
messagediv
>
div>
css grid布局筆記
grid布局 網格布局，通過在父元素上設定display grid 來設定乙個網格容器，內部的子元素採用網格的方式進行布局。fr單位 css自適應單位 在grid布局中如果一行分為四列，其中一列為固定width 100px，其他列都為1fr，那麼1fr 100 100px 3。單元格 行和列形成的區...
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...