css grid布局
css-grid
foo
1
2
3
4
5
6
7
8
9
bar
flex是轴线布局，称为一维布局；grid则是将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看做是二维布局。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-grid</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
display: grid;
/*
grid-template-columns属性定义每一列的列宽
grid-template-rows属性定义每一行的行高
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
*/
/*
除了使用绝对单位，也可以使用百分比。
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
*/
/*
重复写同样的值可以使用repeat()函数
repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
grid-template-columns: repeat(3,33.33%);
*/
/*
auto-fill 关键字
grid-template-columns: repeat(auto-fill, 100px);
每列宽度100px，然后自动填充，直到容器不能放置更多的列。
*/
/*
fr 关键字（fraction 的缩写，意为"片段"）
表示比例关系
grid-template-columns: 1fr 1fr;表示两个相同宽度的列。
grid-template-columns: 150px 1fr 2fr;第一列的宽度为150像素，第二列的宽度是第三列的一半。
*/
/*
minmax()函数产生一个长度范围，表示长度就在这个范围之内。他接受两个参数，分别是最大值和最小值。
grid-template-columns: 1fr 1fr minmax(100px,1fr); minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
*/
/*
auto关键字
auto关键字表示游浏览器自己决定长度。
grid-template-columns: 100px auto 100px;
*/
/* grid-template-columns: 70% 30%;左边栏设为70%，右边栏设为30%。 */
/* grid-template-columns: 66.66% 33.33%; */
/*
grid-row-gap 行间距
grid-column-gap 列间距
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。
grid-gap: <grid-row-gap> <grid-column-gap>;
*/
/*
grid-auto-flow 属性
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。
这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
*/
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* grid-auto-flow: row dense; */
/*
justify-items: start | end | center | stretch;设置单元格内容的水平位置
align-items: start | end | center | stretch; 设置单元格内容的垂直位置
place-items <align-items> <justify-items>;align-items属性和justify-items属性的合并简写形式。
justify-content 整个内容区域在容器里面的水平位置（左中右）
align-content属性是整个内容区域的垂直位置（上中下）
place-content属性是align-content属性和justify-content属性的合并简写形式。
共有属性
start 对齐单元格的起始边缘
end 对齐单元格的结束边缘
center 单元格内布局中
stretch 拉伸，占满单元格的整个宽度（默认值）
justify-content align-content属性
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
*/
/* justify-items: start; */
/*
grid-auto-columns
grid-auto-rows
*/
grid-auto-rows: 50px;
}
.item{
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1 {
background-color: #ef342a;
/*
项目属性
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
*/
/*
左边框是第二根垂直网格线，右边框是第四根垂直网格线。
grid-column-start: 2;
grid-column-end: 4;
*/
/* grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4; */
/*
grid-column属性是grid-column-start和grid-column-end的合并简写形式，
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
*/
grid-column: 1 / 3;
grid-row: 1 / 3;
/*
grid-area 属性
1号项目位于e区域
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
*/
/* grid-area: e; */
grid-area: 1 / 1 / 2 / 3;
/*
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self属性是align-self属性和justify-self属性的合并简写形式。
*/
justify-self:start;
align-self: start;
}
/* .item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
} */
/* 等同于 */
/* .item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
} */
.item-2 {
background-color: #f68f26;
}
.item-3 {
background-color: #4ba946;
}
.item-4 {
background-color: #0376c2;
}
.item-5 {
background-color: #c077af;
}
.item-6 {
background-color: #f8d29d;
}
.item-7 {
background-color: #b5a87f;
}
.item-8 {
background-color: #d0e4a9;
}
.item-9 {
background-color: #4dc7ec;
}
</style>
</head>
<body>
<span>foo</span>
<div >
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
<span>bar</span>
<div>
flex是轴线布局，称为一维布局；grid则是将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看做是二维布局。
</div>
</body>
</html>