88.CSS---Grid 网格布局教程
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
如果容器的宽度没有限定，就会以容器最大的宽度来等比例排列
.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)
当容器宽度大于项目的集合宽度，当容器高度大于项目的集合高度，项目会自动居中在每两列之间，如下代码
.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
.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属性指定项目放在哪一个区域。
.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;}
2345.repeat() 函数
repeat 函数作用在可以把重复的简写，代码如下。第一个参数为重复的次数，第二个参数是重复的数值
.section-five-1{
width:500px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
}
repeat()重复某种模式也是可以的。
如下图定义了6列，第一列和第四列的宽度为100px，第二列和第五列为220px，第三列和第六列为1fr。
.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) 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
.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，变成"先列后行"。
.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才会有效果。如下
.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;恢复默认情况。如下
.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;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。如下
.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;项目与项目的间隔相等，项目与容器边框之间没有间隔。如下
.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;项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。如下
.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号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。如下
上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。
下面的例子是指定四个边框位置的效果。
1号项目的左边框是第1根垂直网格线，右边框是第3根垂直网格线。上边框是第2根水平网格线，下边框是第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;
}
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
上面代码表示，1号项目的左边框距离右边框跨越3个网格。上边框距离下边框跨越2个网格
.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：拉伸，占满单元格的整个宽度（默认值）。
.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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</blockquote>
<div class="section-four-1">
<span class="header"><img style="width:450px;height:300px" src="/image/grid/four-1.jpg" alt=""></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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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>
88.CSS---Grid 网格布局教程的更多相关文章
- CSS Grid 网格布局教程
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- 轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...
- css - Grid网格布局
.wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...
- css grid 网格布局
前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...
- grid网格布局使用
定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...
- 【CSS】343- CSS Grid 网格布局入门
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...
- 不用bootstrap，只用CSS创建网格布局
本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...
随机推荐
- Java生成二维码(Java程序都可以使用)
工具类,链接:https://pan.baidu.com/s/18U399fTH5wBJPnL97pAekg 提取码:bmw7 注:里面的corejar包是使用的zxing的代码,我只是将其导出的ja ...
- flutter无线调试与打包
1.WIFI连接设备 设备打开开发者选项 -> 点击WIFI调试 -> 项目目录下输入终端命令: adb connect 设备ip地址:[端口号(一般是5555)] 2.apk打包 ...
- 动态数组& allocator
问题来源 在编写程序的时候,对数组."二维数组"的分配的删除掌握的不是很清楚,不能正确的进行定义初始化. 以及在使用vector的时候,如何正确的定义及初始化 注意!!! 尽量使用 ...
- codeforces 808 D. Array Division（二分）
题目链接:http://codeforces.com/contest/808/problem/D 题意:有一串长度为n的数组,要求选择一个数字交换它的位置使得这串数能够分成两串连续的和一样的数组. 这 ...
- 使用图灵机器人api搭建微信聊天机器人php实现
之前通过hook技术实现了微信pc端发送消息功能,如果在结合图灵机器人就能实现微信聊天机器人. 代码下载:http://blog.yshizi.cn/131.html 逻辑如下: 下面我简单介绍一下步 ...
- Maven学习归纳（五）——继承与聚合实例讲解
一.Maven的继承 1.1 什么是继承? 继承:父工程拆分出很多子工程,可以通过父工程,统一管理依赖的版本 1.2 为什么要使用继承呢? 在A.jar 依赖着——>B.jar依赖着——> ...
- MySQL二进制日志分析-概述篇
MySQL从3.23版本开始引入了二进制日志,用于的数据复制, 二进制日志根据MySQL的版本不同,目前有4个版本: https://dev.mysql.com/doc/internals/en/bi ...
- bluetooth(蓝牙) AVRCP协议概念及代码流程解析
一 概念 AVRCP全称:The Audio/Video Remote Control Profile (AVRCP) 翻译成中文就是:音视频远程控制协议.概念:AVRCP定义了蓝牙设备之间的音视频传 ...
- Docker下kafka学习三部曲之一：极速体验kafka
Kafka是一种高吞吐量的分布式发布订阅消息系统,从本章开始我们先极速体验,再实战docker下搭建kafka环境,最后开发一个java web应用来体验kafka服务. 我们一起用最快的速度体验ka ...
- .Net基础篇_学习笔记_第六天_for循环语法_正序输出和倒序输出
for TAB 和 forr TAB using System; using System.Collections.Generic; using System.Linq; using System. ...