文章目录
网格及fr单位
code
<style>
.main{
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 2fr 1fr;
}
.main div{
background: pink;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
result
合并网格及网格命名
code
<style>
.main{
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3"
;
}
.main div{
background: pink;
border: 1px purple solid;
box-sizing: border-box;
}
.main div:nth-of-type(1){
grid-area: a1;
}
.main div:nth-of-type(2){
grid-area: a2;
}
.main div:nth-of-type(3){
grid-area: a3;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
result
网格间隙
/*row-gap: 20px;*/
/*column-gap: 30px;*/
grid-gap: 20px 30px;
<style>
.main{
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3";
/*row-gap: 20px;*/
/*column-gap: 30px;*/
grid-gap: 20px 30px;
}
.main div{
background: pink;
border: 1px purple solid;
box-sizing: border-box;
}
.main div:nth-of-type(1){
grid-area: a1;
}
.main div:nth-of-type(2){
grid-area: a2;
}
.main div:nth-of-type(3){
grid-area: a3;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
网格对齐方式
子项对齐
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
justify-items: center;
align-items: center;
}
.main div{
width: 50px;
height: 50px;
background: pink;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
result
justify-items: start;
align-items: end;
复合样式
所有网格对齐
<style>
.main {
width: 500px;
height: 500px;
background: skyblue;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
justify-content: space-evenly;
align-content: end;
}
.main div{
background: pink;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
缩写
隐式显式网格
默认行隐式网格
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px;
}
.main div{
border: 1px black solid;
box-sizing: border-box;
background: pink;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
设置了一行三列,4和5自动分布在了隐式网格
调节隐式网格
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px;
/*默认row就是行产生隐式网格*/
grid-auto-flow: row;
/*可以调节产生隐式网格的高度*/
grid-auto-rows: 100px;
}
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 100px;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: column;
grid-auto-columns: 100px;
}
.main div{
border: 1px black solid;
box-sizing: border-box;
background: pink;
}
</style>
规定从哪里开始排
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px;
/*默认row就是行产生隐式网格*/
grid-auto-flow: row;
/*可以调节产生隐式网格的高度*/
grid-auto-rows: 100px;
}
.main div{
border: 1px black solid;
box-sizing: border-box;
background: pink;
}
.main div:nth-of-type(1){
grid-column-start: 2;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
紧密排列dense
紧密排列dense
grid-auto-flow: row dense;
基于线的元素位置
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.main div{
background: pink;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
</style>
<div class="main">
<div>1</div>
</div>
其他写法
repeat minmax
根据分辨率不同调节行列
叠加布局
<style>
.main {
width: 750px;
height: 500px;
background: skyblue;
display: grid;
}
.main img{
grid-area: 1/1/1/1;
}
.main span{
grid-area: 1/1/1/1;
justify-self: end;
margin: 5px;
}
.main p{
grid-area: 1/1/1/1;
align-self: end;
margin: 0;
padding: 0;
background:rgba(0,0,0,0.5);
height: 30px;
line-height: 30px;
color: white;
}
</style>
<div class="main">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic5.40017.cn%2F01%2F000%2F4a%2F1d%2FrBLkBltAHdGAN4BLAADjeBFk6iU686_750x_00.jpg&refer=http%3A%2F%2Fpic5.40017.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660151456&t=859a309ea075a34710ffd37a890d6850"
alt="">
<span>自制</span>
<p>热卖中...</p>
</div>
多种组合排列
<style>
.main {
width: 300px;
height: 300px;
background: skyblue;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
grid-gap: 5px;
}
.main div{
background: pink;
}
.main div:nth-of-type(1){
grid-area: 1/1/span 2/span 2;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
栅格布局
<style>
.row {
background: skyblue;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px;
grid-auto-rows: 50px;
}
.row div {
background: pink;
border: 1px black solid;
}
.row .col-1 {
grid-area: auto/ auto/ auto/span 1;
}
.row .col-2 {
grid-area: auto/ auto/ auto/span 2;
}
.row .col-3 {
grid-area: auto/ auto/ auto /span 3;
}
.row .col-4 {
grid-area: auto/ auto/ auto /span 4;
}
.row .col-5{
grid-area: auto/ auto/ auto /span 5;
}
.row .col-6{
grid-area: auto/ auto/ auto /span 6;
}
.row .col-7 {
grid-area: auto/ auto/ auto /span 7;
}
.row .col-8{
grid-area: auto/ auto/ auto /span 8;
}
.row .col-9{
grid-area: auto/ auto/ auto /span 9;
}
.row .col-10{
grid-area: auto/ auto/ auto /span 10;
}
.row .col-11{
grid-area: auto/ auto/ auto /span 11;
}
.row .col-12{
grid-area: auto/ auto/ auto /span 12;
}
</style>
<div class="row">
<div class="col-3">1</div>
</div>
行列自适应布局
<style>
.main{
width: 300px;
background: skyblue;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: 100px;
grid-gap: 5px;
}
.main div{
background: pink;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
</div>
<style>
.main{
height: 300px;
background: skyblue;
display: inline-grid;
grid-template-rows: repeat(3,1fr);
grid-auto-flow: column;
grid-auto-columns: 100px;
grid-gap: 5px;
}
.main div{
background: pink;
}
</style>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
<div>6</div>
</div>