grid 兼容性查看请点此处 最新Grid兼容
grid 布局就是给父元素(容器)添加display:grid
,然后使子元素(项目)改变布局,
1 2 3 4 5 6 7 8 9
上面九个正方形的代码如下:没有给正方形设定宽度,是为了方便观察css效果
.seven{
background:#f1c40f;
line-height:100px;
color:#fff;
font-size: 40px;
text-align: center;
}
1.grid-template-columns
属性 | grid-template-rows
属性
grid-template-columns
定义每一列的列宽
grid-template-rows
定义每一行的行高
单位有:fr(分数)、%、px
.section-one-1{
width:400px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
把九个宫格分成了三行三列,每一个项目的空间占1/3*1/3=1/9
123456789如果容器的宽度没有限定,就会以容器最大的宽度来等比例排列
123456789.section-one-2{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
2.如果要使容器内项目居中,则可使用justify-items
属性|align-items
属性|place-items
属性
justify-items
属性设置单元格内容的水平位置(左中右 默认)start | center | end | stretch;
align-items
属性设置单元格内容的垂直位置(上中下 默认)start | center | end | stretch;
place-items
属性是align-items
属性和justify-items
属性的合并简写形式。
place-items: align-items(start) justify-items(end)
当容器宽度大于项目的集合宽度,当容器高度大于项目的集合高度,项目会自动居中在每两列之间,如下代码
123456789.section-two-1 {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
height:500px;
}
3.grid-row-gap
属性|grid-column-gap
属性|grid-gap
属性
grid-row-gap
属性设置行与行的间隔(行间距)
grid-column-gap
属性设置列与列的间隔(列间距)
grid-gap
属性是grid-row-gap
和grid-column-gap
的合并简写形式
grid-gap: grid-row-gap grid-column-gap
123456789.section-three-1{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
grid-row-gap: 20px;
grid-column-gap: 30px;
}
4.grid-template-areas
属性 |grid-area
属性
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas
属性用于定义区域
这个属性需要搭配项目(儿子)的grid-area
属性使用
grid-area
属性指定项目放在哪一个区域。
234.section-four-1{
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows:150px 150px 150px;
grid-template-areas
:"header header header""header header header"
"two three four";
}
.section-four-1>span:first-child{
grid-area
: header;}
.section-four-1>span:nth-child(2){
grid-area
: two;}
.section-four-1>span:nth-child(3){
grid-area
: three;}
.section-four-1>span:last-child{
grid-area
: four;}
5.repeat()
函数
repeat 函数作用在可以把重复的简写,代码如下。第一个参数为重复的次数,第二个参数是重复的数值
123456789.section-five-1{
width:500px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
repeat()
重复某种模式也是可以的。
如下图定义了6列,第一列和第四列的宽度为100px,第二列和第五列为220px,第三列和第六列为1fr。
123456789.section-five-2{
display: grid;
grid-template-columns:repeat(2,100px 220px 1fr);
grid-template-rows: repeat(3,1fr);
}
6.minmax(min,max)
函数
minmax(min,max)
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
123456789.section-six-1{
display: grid;
grid-template-columns:1fr 1fr minmax(50px, 100px);
grid-template-rows: 1fr 1fr minmax(50px, 150px);
}
7.grid-auto-flow
属性
grid-auto-flow
属性决定,默认值是row,即"先行后列"。也可以将它设成column,变成"先列后行"。
123456789.section-seven-1{
display: grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(3,1fr);
grid-auto-flow: column;
}
8.justify-content
属性|align-content
属性|place-content
属性
justify-content
属性是整个内容区域在容器里面的水平位置(左中右)start | end | center | stretch | space-around | space-between | space-evenly;
align-content
属性是整个内容区域的垂直位置(上中下)start | end | center | stretch | space-around | space-between | space-evenly;
place-content
属性:align-content justify-content
justify-content
属性值只能体现在grid-template-columns
中某一个值为auto才会有效果。如下
123456789.section-eight-1{
display: grid;
grid-template-columns:150px auto 150px;
grid-template-rows:repeat(3,1fr);
place-items: center center;
height: 500px;
justify-content: start;
}
justify-content:stretch;
恢复默认情况。如下
123456789.section-eight-2{
display: grid;
grid-template-columns:150px auto 150px;
grid-template-rows:repeat(3,1fr);
place-items: center center;
height: 500px;
justify-content:stretch;
}
justify-content:space-around;
每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。如下
123456789.section-eight-3{
display: grid;
grid-template-columns:150px auto 150px;
grid-template-rows:repeat(3,1fr);
place-items: center center;
height: 500px;
justify-content:space-around;
}
justify-content:space-between;
项目与项目的间隔相等,项目与容器边框之间没有间隔。如下
123456789.section-eight-4{
display: grid;
grid-template-columns:150px auto 150px;
grid-template-rows:repeat(3,1fr);
place-items: center center;
height: 500px;
justify-content:space-between;
}
justify-content:space-evenly;
项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。如下
123456789.section-eight-5{
display: grid;
grid-template-columns:150px auto 150px;
grid-template-rows:repeat(3,1fr);
place-items: center center;
height: 500px;
justify-content:space-evenly;
}
align-content
属性和justify-content
属性是一样的
9. grid-column-start
属性 | grid-column-end
属性
grid-row-start
属性 | grid-row-end
属性
这些属性定义在项目上面.
grid-column-start
属性:左边框所在的垂直网格线
grid-column-end
属性:右边框所在的垂直网格线
grid-row-start
属性:上边框所在的水平网格线
grid-row-end
属性:下边框所在的水平网格线
.section-nine-1{
width:400px;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
.section-nine-1>span:first-child{
grid-column-start: 2;
grid-column-end: 4;
}
1号项目的左边框是第二根垂直网格线,右边框是第四根垂直网格线。如下
123456789上图中,只指定了1号项目的左右边框,没有指定上下边框,所以会采用默认位置,即上边框是第一根水平网格线,下边框是第二根水平网格线。
下面的例子是指定四个边框位置的效果。
1号项目的左边框是第1根垂直网格线,右边框是第3根垂直网格线。上边框是第2根水平网格线,下边框是第4根水平垂直线。如下
123456789.section-nine-2{
width:400px;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
.section-nine-2>span:first-child{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
这四个属性的值还可以使用span
关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格。
上面代码表示,1号项目的左边框距离右边框跨越3个网格。上边框距离下边框跨越2个网格
123456789.section-nine-3{
width:400px;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
.section-nine-3>span:first-child{
grid-column-start:span 3;
grid-row-start:span 2;
}
grid-column
属性 | grid-row
属性
grid-column
属性是grid-column-start
和grid-column-end
的合并简写形式
grid-row
属性是grid-row-start
属性和grid-row-end
的合并简写形式。
.section-nine-3>span:first-child{
grid-column-start:1/3;
grid-row:2/4;
}
.section-nine-3>span:first-child{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
10.justify-self
属性 | align-self
属性 | place-self
属性
justify-self
属性设置单元格内容的水平位置(左中右),跟justify-items
属性的用法完全一致,但只作用于单个项目。
justify-self
属性设置单元格内容的垂直位置(上中下),跟align-items
属性的用法完全一致,也是只作用于单个项目。
place-self
属性是align-self
属性和justify-self
属性的合并简写形式。
如果省略第二个值,place-self
属性会认为这两个值相等。
place-self: (align-self) (justify-self);
两个属性都可以取四个值。start:对齐单元格的起始边缘。 end:对齐单元格的结束边缘。
center:单元格内部居中。stretch:拉伸,占满单元格的整个宽度(默认值)。
123456789 附上原css代码.section-ten-1{
width:400px;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
.section-ten-1>span:first-child{
justify-self: start;
}
header{ margin:20px 0; text-align: center; font-size: 30px; color:#2ecc71; } .section-1{ margin:20px 0; } .one{ /*width:100px;*/ /*height:100px;*/ background: #1abc9c; color:#fff; font-size: 40px; text-align: center; line-height:100px; } .two{ /*width:100px;*/ /*height:100px;*/ background: #2ecc71; color:#fff; font-size: 40px; text-align: center; line-height:100px; } .three{ /*width:100px;*/ /*height:100px;*/ background: #3498db; color:#fff; font-size: 40px; text-align: center; line-height:100px; } .four{ /*width:100px;*/ /*height:100px;*/ background: #9b59b6; color:#fff; font-size: 40px; text-align: center; line-height:100px; } .five{ /*width:100px;*/ /*height:100px;*/ background:#34495e; color:#fff; font-size: 40px; text-align: center; line-height:100px; } .six{ /*width:100px;*/ /*height:100px;*/ background:#ff9966; color:#fff; font-size: 40px; text-align: center; line-height:100px; } .seven{ /*width:100px;*/ /*height:100px;*/ background:#f1c40f; color:#fff; font-size: 40px; text-align: center; line-height:100px; } .eight{ /*width:100px;*/ /*height:100px;*/ background: #e67e22; color:#fff; font-size: 40px; text-align: center; line-height:100px; } .nine{ /*width:100px;*/ /*height:100px;*/ background: #e74c3c; color:#fff; font-size: 40px; text-align: center; line-height:100px; } .section-one-1{ width:400px; display:grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .section-one-2{ display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .section-two-1 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center center; height:500px; } .section-three-1{ display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); grid-row-gap: 20px; grid-column-gap: 30px; } .section-four-1{ display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: 150px 150px 150px; grid-template-areas:"header header header" "header header header" "two three four"; } .section-four-1>span:first-child{ grid-area: header; } .section-four-1>span:nth-child(2){ grid-area: two; } .section-four-1>span:nth-child(3){ grid-area: three; } .section-four-1>span:last-child{ grid-area: four; } .section-five-1{ width:500px; display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); } .section-five-2{ display: grid; grid-template-columns: repeat(2,100px 220px 1fr); grid-template-rows: repeat(3,1fr); } .section-six-1{ display: grid; grid-template-columns:1fr 1fr minmax(50px, 100px); grid-template-rows:1fr 1fr minmax(50px, 150px); } .section-seven-1{ display: grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); grid-auto-flow: column; } .section-eight-1{ display: grid; grid-template-columns: 150px auto 150px; grid-template-rows: repeat(3, 1fr); place-items: center center; height: 500px; justify-content: start; } .section-eight-2{ display: grid; grid-template-columns: 150px auto 150px; grid-template-rows: repeat(3, 1fr); place-items: center center; height: 500px; justify-content: stretch; } .section-eight-3{ display: grid; grid-template-columns: 150px auto 150px; grid-template-rows: repeat(3, 1fr); place-items: center center; height: 500px; justify-content: space-around; } .section-eight-4{ display: grid; grid-template-columns: 150px auto 150px; grid-template-rows: repeat(3, 1fr); place-items: center center; height: 500px; justify-content: space-between; } .section-eight-5{ display: grid; grid-template-columns: 150px auto 150px; grid-template-rows: repeat(3, 1fr); place-items: center center; height: 500px; justify-content: space-evenly; } .section-nine-1{ width:400px; display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); } .section-nine-1>span:first-child{ grid-column-start: 2; grid-column-end: 4; } .section-nine-2{ width:400px; display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); } .section-nine-2>span:first-child{ grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; } .section-nine-3{ width:400px; display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); } .section-nine-3>span:first-child{ grid-column-start: span 3; grid-row-start: span 2; } .section-ten-1{ width:400px; display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); } .section-ten-1>span:first-child{ justify-self: start; }
*{ margin:0; padding:0; font-family: ‘幼圆‘; } ::selection{ color:#fff; background: #1abc9c; } html::-webkit-scrollbar { width: 13px; height: 13px; } html::-webkit-scrollbar-thumb { background: -webkit-gradient(linear,left top,left bottom,from(#2ecc71),to(#27ae60)); background: linear-gradient(to bottom,#2ecc71,#27ae60); border-radius: 30px; -webkit-box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25); box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25); } html::-webkit-scrollbar-track { background: linear-gradient(to right,#95a5a6,#95a5a6 1px,#7f8c8d 1px,#7f8c8d); } .container-1200{ width:1200px; margin:0 auto; } h1{ color:#2ecc71; text-align: center; } li{ list-style: none; } span{ display: inline-block; } code{ display: inline-block; padding-left: 5px; padding-right: 5px; font-size: 120%; background-color: pink; border-radius: 5px; margin: auto 3px; color:#111; } blockquote{ background-color: #f5f2f0; padding: 1em; margin: 2em 2em; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; border-width: 0.3em; border-color: #e0dfcc; border-style: solid; text-shadow: 0 1px white; overflow: auto; } blockquote div{ width:39%; float: left; } blockquote img{ width:29%; float: left; } b{ color:red; font-size: 20px; } p{ /*font-family: ‘微软雅黑‘;*/ margin:10px 0; font-weight:600; font-size: 16px; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Grid 网格布局教程</title> <link rel="stylesheet" href="/css/public.css"> <link rel="stylesheet" href="/css/grid.css"> </head> <body class="container-1200"> <section> <header>CSS Grid 网格布局教程</header> <h2>grid 兼容性查看请点此处 <a style="color:red;font-weight:800;" href="https://caniuse.com/#search=grid">最新Grid兼容</a></h2> <p>grid 布局就是给父元素(容器)添加<code>display:grid</code>,然后使子元素(项目)改变布局,</p> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </section> <p>上面九个正方形的代码如下:没有给正方形设定宽度,是为了方便观察css效果</p> <blockquote> <p>.seven{</p> <p> background:#f1c40f;</p> <p>line-height:100px;</p> <p>color:#fff;</p> <p>font-size: 40px;</p> <p> text-align: center;</p> <p>}</p> </blockquote> <section class="section-1"> <p><h1>1.<code>grid-template-columns</code> 属性 | <code>grid-template-rows</code> 属性</h1></p> <p><code>grid-template-columns</code> 定义每一列的列宽</p> <p><code>grid-template-rows</code> 定义每一行的行高</p> <p>单位有:fr(分数)、%、px</p> <blockquote> <div> <p>.section-one-1{</p> <p>width:400px;</p> <p>display: grid;</p> <p>grid-template-columns: 1fr 1fr 1fr;</p> <p>grid-template-rows: 1fr 1fr 1fr;</p> <p>}</p> </div> <img src="/image/grid/1.png" > </blockquote><p>把九个宫格分成了三行三列,每一个项目的空间占1/3*1/3=1/9</p> <div class="section-one-1"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <p>如果容器的宽度没有限定,就会以容器最大的宽度来等比例排列</p> <blockquote> <div> <p>.section-one-2{</p> <p>display: grid;</p> <p>grid-template-columns: 1fr 1fr 1fr;</p> <p>grid-template-rows: 1fr 1fr 1fr;</p> <p>}</p> </div> <img style="width:50%;" src="/image/grid/2.png" > </blockquote> <div class="section-one-2"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> </section> <section class="section-1"> <p><h1>2.如果要使容器内项目居中,则可使用<code>justify-items</code>属性|<code>align-items</code> 属性|<code>place-items</code> 属性</h1></p> <p><code>justify-items</code>属性设置单元格内容的水平位置(左中右 默认)<b>start | center | end | stretch</b>;</p> <p><code>align-items</code>属性设置单元格内容的垂直位置(上中下 默认)<b>start | center | end | stretch</b>;</p> <p><code>place-items</code>属性是<code>align-items</code>属性和<code>justify-items</code> 属性的合并简写形式。</p> <blockquote> <p>place-items: align-items(start) justify-items(end)</p> </blockquote> <p>当容器宽度大于项目的集合宽度,当容器高度大于项目的集合高度,项目会自动居中在每两列之间,如下代码</p> <blockquote> <div> <p>.section-two-1 {</p> <p>display: grid;</p> <p>grid-template-columns: repeat(3,1fr);</p> <p>grid-template-rows: repeat(3,1fr);</p> <p>place-items: center center;</p> <p>height:500px;</p> <p>}</p> </div> <img style="width:50%;" src="/image/grid/3.png" > </blockquote> <div class="section-two-1"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> </section> <section class="section-1"> <p><h1>3.<code>grid-row-gap</code> 属性|<code>grid-column-gap</code> 属性|<code>grid-gap</code> 属性</h1></p> <p><code>grid-row-gap</code> 属性设置行与行的间隔(行间距)</p> <p><code>grid-column-gap</code> 属性设置列与列的间隔(列间距)</p> <p><code>grid-gap</code>属性是<code>grid-row-gap</code>和<code>grid-column-gap</code>的合并简写形式</p> <blockquote> <p>grid-gap: grid-row-gap grid-column-gap</p> </blockquote> <blockquote> <div> <p>.section-three-1{</p> <p>display: grid;</p> <p>grid-template-columns: repeat(3,1fr);</p> <p>grid-template-rows: repeat(3,1fr);</p> <p>grid-row-gap: 20px;</p> <p> grid-column-gap: 30px;</p> <p>}</p> </div> <img style="width:61%;" src="/image/grid/4.png" > </blockquote> <div class="section-three-1"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> </section> <section class="section-1"> <h1>4.<code>grid-template-areas</code>属性 |<code>grid-area</code>属性</h1> <p>网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。<code>grid-template-areas</code>属性用于定义区域</p> <p>这个属性需要搭配项目(儿子)的<code>grid-area</code>属性使用</p> <p><code>grid-area</code>属性指定项目放在哪一个区域。</p> <blockquote> <div> <p>.section-four-1{</p> <p>display: grid;</p> <p>grid-template-columns: 150px 150px 150px;</p> <p>grid-template-rows:150px 150px 150px;</p> <p><code>grid-template-areas</code>:"header header header"</p> <p>"header header header"</p> <p>"two three four";</p> <p>}</p> <p>.section-four-1>span:first-child{</p> <p><code>grid-area</code>: header;</p> <p>}</p> <p>.section-four-1>span:nth-child(2){</p> <p><code>grid-area</code>: two;</p> <p>}</p> <p>.section-four-1>span:nth-child(3){</p> <p><code>grid-area</code>: three;</p> <p>}</p> <p>.section-four-1>span:last-child{</p> <p><code>grid-area</code>: four;</p> <p>}</p> </div> <img style="width:50%;" src="/image/grid/5.png" > </blockquote> <div class="section-four-1"> <span class="header"><img style="width:450px;height:300px" src="/image/grid/four-1.jpg" ></span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> </div> </section> <section class="section-1"> <h1>5.<code>repeat()</code> 函数</h1> <p>repeat 函数作用在可以把重复的简写,代码如下。第一个参数为重复的次数,第二个参数是重复的数值</p> <blockquote> <div> <p>.section-five-1{</p> <p>width:500px;</p> <p>display: grid;</p> <p>grid-template-columns: repeat(3,1fr);</p> <p>grid-template-rows: repeat(3,1fr);</p> <p>}</p></div> <img src="/image/grid/6.png" > </blockquote> <div class="section-five-1"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <p><code>repeat()</code>重复某种模式也是可以的。</p> <p>如下图定义了6列,第一列和第四列的宽度为100px,第二列和第五列为220px,第三列和第六列为1fr。</p> <blockquote> <div> <p>.section-five-2{</p> <p>display: grid;</p> <p>grid-template-columns:repeat(2,100px 220px 1fr);</p> <p>grid-template-rows: repeat(3,1fr);</p> <p>}</p> </div> <img style="width:50%;" src="/image/grid/7.png" > </blockquote> <div class="section-five-2"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> </section> <section class="section-1"> <h1>6.<code>minmax(min,max)</code> 函数</h1> <p><code>minmax(min,max)</code> 函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。</p> <blockquote> <div> <p>.section-six-1{</p> <p>display: grid;</p> <p>grid-template-columns:1fr 1fr minmax(50px, 100px);</p> <p>grid-template-rows: 1fr 1fr minmax(50px, 150px);</p> <p>}</p> </div> <img style="width:60%;" src="/image/grid/8.png" > </blockquote> <div class="section-six-1"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> </section> <section class="section-1"> <h1>7.<code>grid-auto-flow</code> 属性</h1> <p><code>grid-auto-flow</code>属性决定,默认值是row,即"先行后列"。也可以将它设成column,变成"先列后行"。</p> <blockquote> <div> <p>.section-seven-1{</p> <p>display: grid;</p> <p>grid-template-columns:repeat(3,1fr);</p> <p>grid-template-rows:repeat(3,1fr);</p> <p>grid-auto-flow: column;</p> <p>}</p> </div> </blockquote> <div class="section-seven-1"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> </section> <section class="section-1"> <h1>8.<code>justify-content</code>属性|<code>align-content</code>属性|<code>place-content</code>属性</h1> <p><code>justify-content</code>属性是整个内容区域在容器里面的水平位置(左中右)start | end | center | stretch | space-around | space-between | space-evenly;</p> <p><code>align-content</code>属性是整个内容区域的垂直位置(上中下)start | end | center | stretch | space-around | space-between | space-evenly;</p> <p><code>place-content</code>属性:align-content justify-content</p> <p><code>justify-content</code>属性值只能体现在<code>grid-template-columns</code>中某一个值为auto才会有效果。如下</p> <blockquote> <div> <p>.section-eight-1{</p> <p>display: grid;</p> <p>grid-template-columns:150px auto 150px;</p> <p>grid-template-rows:repeat(3,1fr);</p> <p>place-items: center center;</p> <p>height: 500px;</p> <p>justify-content: start;</p> <p>}</p> </div> <img style="width:20%;" src="/image/grid/9.png" > </blockquote> <div class="section-eight-1"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <p><code>justify-content:stretch;</code>恢复默认情况。如下</p> <blockquote> <div> <p>.section-eight-2{</p> <p>display: grid;</p> <p>grid-template-columns:150px auto 150px;</p> <p>grid-template-rows:repeat(3,1fr);</p> <p>place-items: center center;</p> <p>height: 500px;</p> <p>justify-content:stretch;</p> <p>}</p> </div> <img style="width:50%;" src="/image/grid/10.png" > </blockquote> <div class="section-eight-2"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <p><code>justify-content:space-around;</code>每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。如下</p> <blockquote> <div> <p>.section-eight-3{</p> <p>display: grid;</p> <p>grid-template-columns:150px auto 150px;</p> <p>grid-template-rows:repeat(3,1fr);</p> <p>place-items: center center;</p> <p>height: 500px;</p> <p>justify-content:space-around;</p> <p>}</p> </div> <img style="width:50%;" src="/image/grid/11.png" > </blockquote> <div class="section-eight-3"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <p><code>justify-content:space-between;</code>项目与项目的间隔相等,项目与容器边框之间没有间隔。如下</p> <blockquote> <div> <p>.section-eight-4{</p> <p>display: grid;</p> <p>grid-template-columns:150px auto 150px;</p> <p>grid-template-rows:repeat(3,1fr);</p> <p>place-items: center center;</p> <p>height: 500px;</p> <p>justify-content:space-between;</p> <p>}</p> </div> <img style="width:50%;" src="/image/grid/12.png" > </blockquote> <div class="section-eight-4"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <p><code>justify-content:space-evenly;</code>项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。如下</p> <blockquote> <div> <p>.section-eight-5{</p> <p>display: grid;</p> <p>grid-template-columns:150px auto 150px;</p> <p>grid-template-rows:repeat(3,1fr);</p> <p>place-items: center center;</p> <p>height: 500px;</p> <p>justify-content:space-evenly;</p> <p>}</p> </div> <img style="width:50%;" src="/image/grid/13.png" > </blockquote> <div class="section-eight-5"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <p><code>align-content</code>属性和<code>justify-content</code>属性是一样的</p> </section> <section class="section-1"> <h1>9. <code>grid-column-start</code> 属性 | <code>grid-column-end</code> 属性 </h1> <h1><code>grid-row-start</code> 属性 | <code>grid-row-end</code> 属性</h1> <p>这些属性定义在项目上面.</p> <p><code>grid-column-start</code>属性:左边框所在的垂直网格线</p> <p><code>grid-column-end</code>属性:右边框所在的垂直网格线</p> <p><code>grid-row-start</code>属性:上边框所在的水平网格线</p> <p><code>grid-row-end</code>属性:下边框所在的水平网格线</p> <blockquote> <div> <p>.section-nine-1{</p> <p>width:400px;</p> <p>display:grid;</p> <p>grid-template-columns: repeat(3,1fr);</p> <p>grid-template-rows: repeat(3,1fr);</p> <p>}</p> <p>.section-nine-1>span:first-child{</p> <p>grid-column-start: 2;</p> <p>grid-column-end: 4;</p> <p>}</p> </div> <img style="width:43%;" src="/image/grid/14.png" > </blockquote> <p>1号项目的左边框是第二根垂直网格线,右边框是第四根垂直网格线。如下</p> <div class="section-nine-1"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <p>上图中,只指定了1号项目的左右边框,没有指定上下边框,所以会采用默认位置,即上边框是第一根水平网格线,下边框是第二根水平网格线。</p> <p>下面的例子是指定四个边框位置的效果。</p> <p>1号项目的左边框是第1根垂直网格线,右边框是第3根垂直网格线。上边框是第2根水平网格线,下边框是第4根水平垂直线。如下</p> <blockquote> <div> <p>.section-nine-2{</p> <p>width:400px;</p> <p>display:grid;</p> <p>grid-template-columns: repeat(3,1fr);</p> <p>grid-template-rows: repeat(3,1fr);</p> <p>}</p> <p>.section-nine-2>span:first-child{</p> <p>grid-column-start: 1;</p> <p>grid-column-end: 3;</p> <p>grid-row-start: 2;</p> <p>grid-row-end: 4;</p> <p>}</p> </div> <img style="width:51%;" src="/image/grid/15.png" > </blockquote> <div class="section-nine-2"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <p>这四个属性的值还可以使用<code>span</code>关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格。</p> <p>上面代码表示,1号项目的左边框距离右边框跨越3个网格。上边框距离下边框跨越2个网格</p> <blockquote> <div> <p>.section-nine-3{</p> <p>width:400px;</p> <p>display:grid;</p> <p>grid-template-columns: repeat(3,1fr);</p> <p>grid-template-rows: repeat(3,1fr);</p> <p>}</p> <p>.section-nine-3>span:first-child{</p> <p>grid-column-start:span 3;</p> <p>grid-row-start:span 2;</p> <p>}</p> </div> <img style="width:31%;" src="/image/grid/16.png" > </blockquote> <div class="section-nine-3"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> <h1><code>grid-column</code> 属性 | <code>grid-row</code> 属性</h1> <p><code>grid-column</code>属性是<code>grid-column-start</code>和<code>grid-column-end</code>的合并简写形式</p> <p><code>grid-row</code>属性是<code>grid-row-start</code>属性和<code>grid-row-end</code>的合并简写形式。</p> <blockquote> <div> <p>.section-nine-3>span:first-child{</p> <p>grid-column-start:1/3;</p> <p>grid-row:2/4;</p> <p>}</p> <p>.section-nine-3>span:first-child{</p> <p>grid-column-start: 1;</p> <p>grid-column-end: 3;</p> <p>grid-row-start: 2;</p> <p>grid-row-end: 4;</p> <p>}</p> </div> </blockquote> </section> <section class="section-1"> <h1>10.<code>justify-self</code> 属性 | <code>align-self</code> 属性 | <code>place-self</code> 属性</h1> <p><code>justify-self</code>属性设置单元格内容的水平位置(左中右),跟<code>justify-items</code>属性的用法完全一致,但只作用于单个项目。</p> <p><code>justify-self</code>属性设置单元格内容的垂直位置(上中下),跟<code>align-items</code>属性的用法完全一致,也是只作用于单个项目。</p> <p><code>place-self</code>属性是<code>align-self</code>属性和<code>justify-self</code>属性的合并简写形式。</p> <p>如果省略第二个值,<code>place-self</code>属性会认为这两个值相等。</p> <blockquote> <p>place-self: (align-self) (justify-self);</p> </blockquote> <p>两个属性都可以取四个值。start:对齐单元格的起始边缘。 end:对齐单元格的结束边缘。</p> <p>center:单元格内部居中。stretch:拉伸,占满单元格的整个宽度(默认值)。</p> <blockquote> <div> <p>.section-ten-1{</p> <p>width:400px;</p> <p>display:grid;</p> <p>grid-template-columns: repeat(3,1fr);</p> <p>grid-template-rows: repeat(3,1fr);</p> <p>}</p> <p>.section-ten-1>span:first-child{</p> <p> justify-self: start;</p> <p>}</p> </div> <img style="width:37%;" src="/image/grid/17.png" > </blockquote> <div class="section-ten-1"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> <span class="five">5</span> <span class="six">6</span> <span class="seven">7</span> <span class="eight">8</span> <span class="nine">9</span> </div> </section> </body> </html>