css grid布局的首次使用

首先來看一下效果圖

接下來廢話不多說，先上**

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
style
>
.box
.a.b
.c.d
.e.f
.gstyle
>
head
>
<
body
>
<
div 
class
="box"
>
<
div 
class
="a"
>
div>
<
div 
class
="b"
>
div>
<
div 
class
="c"
>
div>
<
div 
class
="d"
>
div>
<
div 
class
="e"
>
div>
<
div 
class
="f"
>
div>
<
div 
class
="g"
>
div>
div>
body
>
html
>

網格如下劃分成五列，則用了6條列線

劃分為五行，則用了6條行線

（請隨意吐槽這張）

主要可以參考，裡面有較詳細的說明，也比較清晰，個人推薦可以參考一下

結合這張，應該很好理解的

還是很容易理解 的。

css grid布局使用

display grid 指定乙個容器採用網格布局 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 一 容器屬性 預設情況下 容器元素都是塊級元素，但也可以設定成行內元素 display inline block note 設定網格布局後，容器...

css grid布局筆記

grid布局 網格布局，通過在父元素上設定display grid 來設定乙個網格容器，內部的子元素採用網格的方式進行布局。fr單位 css自適應單位 在grid布局中如果一行分為四列，其中一列為固定width 100px，其他列都為1fr，那麼1fr 100 100px 3。單元格 行和列形成的區...

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...