CSS Grid布局
基本概念
容器
项目
Gird基本概念
容器的属性
- grid-template-columns
- grid-template-rows
- grid-row-gap
- grid-column-gap
- gid-gap(3和4的简写)
- grid-template-areas
- grid-auto-flow
- justify-items
- align-items
- pace-items(8和9的简写)
- justify-content
- align-content
- pace- content(11和12的简写)
- grid-auto-columns
- grid-auto-rows
容器属性:grid-template-*
- grid-template-columns
- grid-template-rows
基本参数
你想要多少行或者列,就填写相应属性值的个数,不填写,自动分配
div{
grid-template-columns:10px 10px 10px;
grid-template-rows:10px 10px;
}
//表示分配了一个3列2行的栅格
repeat()
第一个参数是重复的次数,第二个参数是所要重复的值
div{
grid-template-columns:repeat(3,100px) //表示创建了3列100px的栅格
}
auto-fill
有时,单元格的大小是固定的,但是容器的大小不确定,这个属性就会自动填充
div{
grid-template-columns:repeat(auto-fill,100px)
}
fr
3.fr,为了方便表示比例关系,网格布局提供了f关键字( fraction的缩写,意为“片段”)
div{
grid-template-columns:repeat(3,1fr) //宽度平均分成3等分
}
容器属性:grid-row-gap/grid-column-gap
item(项目)相互之间的间距,注:此属性是容器属性
容器属性:justify-items(水平方向)/ align-items(垂直方向)
设置单元格内容的水平和垂直的对齐方式
justify-items : start | end | center | stretch
例如
容器属性 justify- content(水平方向)/ align- content(垂直方向)
设置整个内容区域的水平和垂直的对齐方式
容器属性grid-auto- columns/grid-auto-rows
用来设置多出来的项目宽和高
项目的属性
项目属性:grid-column-start / grid-column-end/grid-row-start / grid-row-end
句话解释,用来指定tem的具体位置,根据在哪根网格线
此属性简写为
div{
//第一种写法
grid-column-start:1;
grid-column-end:3;
//第二种写法
grid-column:1 /3 ;
}
//两种写法等价
行列同时使用
项目属性:justify-self /align-self/place-self
- justify-self属性设置单元格内容的水平位置(左中右),跟 justify- items属性的用法完全一致,
但只作用于单个项目(水平方向) - align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致
也是只作用于单个项目(垂直方向)
其他css注意事项
box-sizing
box-sizing 默认值是 content-box
当布局为一下这种情况时
html
<body>
<div id="main">
<div id="content">
</div>
</div>
</body>
css
#main{
width: 100%;
background: #6666;
padding: 10px;
// box-sizing: border-box;
}
#content{
width: 100%;
height: 100px;
}
若无box-sizing
则会出现界面能拖动的情况,此时,直接设置box-sizing:boder-box,解决