版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wust_cyl/article/details/85713781
Grid布局:Grid布局知识点
布局1:左右俩边固定,中间自适应
<style>
.wrap{
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 100px;
}
.content-left {
grid-column: 1 / 2;
background: red;
}
.content-center {
grid-column: 2 / 3;
background: green;
text-align: center;
}
.content-right {
grid-column: 3 / 4;
background: red;
}
</style>
<div class = "wrap">
<div class = "content-left"></div>
<div class = "content-center">
<h1>利用Grid布局</h1>
<p>左右俩边固定,中间自适应</p>
</div>
<div class = "content-right"></div>
</div>
布局2:左边固定,右边自适应
<style>
.wrap{
display: grid;
grid-template-columns: 300px auto;
grid-template-rows: 100px;
}
.content-left {
grid-column: 1 / 2;
background: red;
}
.content-right {
grid-column: 2 / 3;
background: green;
text-align: center;
}
</style>
<div class = "wrap">
<div class = "content-left"></div>
<div class = "content-right">
<h1>利用Grid布局</h1>
<p>左边固定,右边自适应</p>
</div>
</div>
同理我们可以实现右边固定,左边自适应
布局3:上下固定,中间自适应
<style>
.wrap{
display: grid;
height: 100%;
grid-template-columns: 300px ;
grid-template-rows: 100px auto 100px;
}
.content-top {
grid-row: 1 / 2;
background: red;
}
.content-center{
grid-row: 2 / 3;
background: green;
text-align: center;
}
.content-bottom {
grid-row: 3 / 4;
background: red;
}
</style>
<div class = "wrap">
<div class = "content-top"></div>
<div class = "content-center">
<h1>利用Grid布局</h1>
<p>上下固定,中间自适应</p>
</div>
<div class = "content-bottom"></div>
</div>
上面只是Grid布局得简单应用,对于二维布局,Grid可以大显身手。
熟练掌握Flex,Grid布局是我们得基本技能。
熟练得说出下面每个属性的含义,是掌握Grid布局的前提。
Grid Container 的全部属性
- display
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- grid-column-gap
- grid-row-gap
- grid-gap
- justify-items
- align-items
- justify-content
- align-content
- grid-auto-columns
- grid-auto-rows
- grid-auto-flow
- grid
Grid Items 的全部属性
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self