一、grid布局概念
grid布局与flex布局对比
flex布局为一维布局，一般一行或一列的布局使用flex布局。
grid布局为二维布局，同时需要兼顾行与列的布局，可以使用gird布局。
grid布局基本概念
row
column
cell
grid line
二、grid容器
设置容器为grid容器
.container{
display:grid;
}
注 : gird容器内部的元素称为grid容器的项目，grid项目的float属性会失效
<style>
body{
padding: 0;
margin: 0;
}
.container{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* 等效于 */
/* grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px); */
/* grid-template-columns: 1fr 1fr minmax(400px,1fr); */
/* grid-template-columns: 100px auto 100px; */
/* grid-template-columns: repeat(3, 33.3%); */
/* grid-template-columns: repeat(auto-fill, 100px); */
/* grid-template-columns: 100px 1fr 2fr; */
/* grid-template-columns: 70% 30%; */
/* grid-template-columns: repeat(9,1fr); */
/*
grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: 1fr 1fr 2fr;
*/
/*grid-template-areas: 'a a a'
'a a a'
'a a a';*/
/* 简写方式 */
/* grid-gap: 20px 20px */
/*
row-gap = grid-row-gap
column-gap = grid-column-gap
*/
/* grid-row-gap: 20px;
grid-column-gap: 20px; */
/* justify-items: center;
align-items: center;
justify-content:center;
align-content: center;
justify-self: center;
align-self: center; */
}
.item{
/*grid-area: a;*/
border: 1px solid red;
}
.box{
background-color: #ccc;
height: 100px;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="box"></div>
</body>
如图所示:
grid容器单元格内的块元素会适应单元的的宽度和高度，
设置justify-items后，单元格内的元素会适应自身内容的宽度，
设置align-items后，单元格内的元素会使用内容的高度。
例 : justify-items和align-items两个属性设置为center，可以将单元格内的内容垂直水平居中显示。
justify-content与aling-content : 设置整个内容区域在容器里面的水平位置和垂直位置。
三、grid项目
justify-self : 设置单元格内容的水平位置
align-self : 设置单元内容的垂直位置。
grid-column-start与grid-column-end : 指定左右边框垂直网格线
grid-row-start与grid-row-end : 指定上下边框水平网格线
四、grid项目实现圣杯布局
<style>
body{
display: grid;
min-width: 550px;
}
.header,.footer{
background-color: palegoldenrod;
height: 200px;
}
.header{
grid-row: 1;
grid-column: 1/7;
}
.footer{
grid-row: 3;
grid-column: 1/7;
}
.left{
background-color: blueviolet;
grid-row: 2;
grid-column: 1/2;
height: 500px;
}
.content{
background-color: lightcoral;
grid-row: 2;
grid-column: 2/6;
height: 500px;
}
.right{
background-color:olivedrab;
grid-row: 2;
grid-column: 6/7;
height: 500px;
}
</style>
<body>
<div class="header">header</div>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
</html>
效果图 :
五、grid项目实现首页
<style>
body{
padding: 0;
margin: 0;
}
.header{
display: grid;
grid-template-columns: 5% 70% 25%;
/* 在单元格内水平居中 */
justify-items: center;
/* 在单元格内存执居中 */
align-items: center;
}
ul li{
display: inline-block;
padding-top: 5px;
}
input{
line-height: auto;
align-items: center;
/* height: 100px; */
}
</style>
<body>
<div class="header">
<div class="logo">LOGO</div>
<div class="nav">
<ul>
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
<li><a href="">导航4</a></li>
<li><a href="">导航5</a></li>
<li><a href="">导航6</a></li>
</ul>
</div>
<div class="input">
<input type="text" name="" id="">
<input type="button" value="提交"></div>
</div>
</body>
效果图 :
参考链接 :
http://xiaozhoubg.com/book/section/76;JSESSIONID=db7f3b3c-52be-4073-90a9-ca60fbebbfbf
版权声明：本文为weixin_43744709原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。