相信大家都比較熟悉flex布局了,最近有空研究了波grid布局,感覺雖然兼容性還不是太高,應用不是太普遍,但是功能非常強大。未來應該是grid+flex為主流,grid是二維布局,很靈活,適合整體構架,而flex是一維布局,適合處理局部細節。
CSS 網格布局(Grid Layout) 是CSS中最強大的布局系統。 這是一個二維系統,這意味着它可以同時處理列和行,不像 flexbox 那樣主要是一維系統。
兼容性目前不是太友好
和felx類似,grid有容器
和項目
Grid容器
屬性列表
Grid項目
的全部屬性
被嚇到了嗎,反正第一次我看是被嚇到了,不過沒事,下面只會講解其中常用的
下面栗子均用.grid_box
,.grid_item
分別指代容器
和項目
,並使用以下html結構
<div class="grid_box">
<div class="grid_item">1</div>
<div class="grid_item">2</div>
<div class="grid_item" id="item3">3</div>
<div class="grid_item" id="item4">4</div>
<div class="grid_item">5</div>
<div class="grid_item">6</div>
<div class="grid_item">7</div>
<div class="grid_item">8</div>
<div class="grid_item">9</div>
<div class="grid_item">10</div>
<div class="grid_item">11</div>
</div>
<span>鄰居元素</span>
.grid_box {
background: #054154;
display: inline-grid; //行級網絡,和span處於一行
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
.grid_box {
background: #054154;
display: grid; //塊級網絡,將span擠入下一行
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
代表第一行高60px,第三行高40px,其他的所有行(不設置或者auto的行)平分剩余高度
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px auto auto;
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
和行高類似,這個代表第一列寬30px,第二列寬20px,第三列第四列平分剩余寬度(和行高不同的是列寬是你設置了多少就會有多少列,列數量和你設置的是相同的)
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px; //行間距2px,列間距4px
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
.grid_box {
grid-template-columns: 30px 20px auto auto;
grid-template-columns: 30px 20px repeat(2,auto);//等價於
}
fr
..grid_box {
grid-template-columns: 30px 20px auto auto;
grid-template-columns: 30px 20px 1fr 1fr;//等價於
grid-template-columns: 30px 20px repeat(2,1fr);//也等價於
}
grid-template-rows: minmax(auto, 30%) 1fr 1fr;
表示第一行高最小auto,最大30% .grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px;
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
#item3{
grid-area: 1 /1/ 2/ 4;
}
grid-area: 1 /1/ 2/ 4;
代表item3的位置是,行線1到2,列線1到4,這四條線組成的區域即是item3的位置,是不是很強大,太叼了這個
#item3{
grid-area: 1 /1/ 2/ 4;
grid-area: 1 /1/ 2/ span 3;//等價
grid-area: 1 /1/ 2/ -2;//等價
}
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px;
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
#item3{
grid-area: 1 /1/ 2/ 4;
order: 1;
}
#item4{
grid-area: 1 /1/ 2/ 4;
}
因為item3有order,所以item3蓋住了item4
.
代表一個空網格單元 <div class="grid_box">
<div class="grid_item" id="header">header</div>
<div class="grid_item" id="aside">aside</div>
<div class="grid_item" id="content">content</div>
<div class="grid_item" id="footer">footer</div>
</div>
<span>鄰居元素</span>
.grid_box {
background: #054154;
width: 500px;
height: 300px;
display: grid;
grid-template-rows: 60px auto 40px;
grid-template-columns: 30px 20px repeat(2,1fr);
grid-gap: 2px 4px;
grid-template-areas: "header header header header" "aside . content content" "footer footer footer footer";
}
.grid_item {
background: #0490db;
border: 1px solid #fff;
}
#header{
grid-area: header;
}
#aside{
grid-area: aside;
}
#content{
grid-area: content;
}
#footer{
grid-area: footer;
}
是不是很強大
大家好,這里是「 TaoLand 」,這個博客主要用於記錄一個菜鳥程序猿的Growth之路。這也是自己第一次做博客,希望和大家多多交流,一起成長!文章將會在下列地址同步更新……
個人博客:www.yangyuetao.cn
小程序:TaoLand
本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。