css grid布局
css-grid
foo
1
2
3
4
5
6
7
8
9
bar
flex是轴线布局，称为一维布局；grid则是将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看做是二维布局。
<!DOCTYPE html> <html lang="en"> <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 id="container"> <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>
