请教grid-template-areas，用stylus怎么写啊？出不来应有的效果
用stylus来写网格区域，引用的时候，出不来效果，正常的css没问题，特请教。
2 回答
写成一行程序没问题，程序正常执行
grid-template-areas "title title header header" "time time swiper swiper" "block1 block2 swiper swiper" "block3 block4 swiper swiper" "block5 block6 swiper swiper" "block7 block7 video info"
但是格式很难看，失去了所见既布局的意思，多行的话，代码没有执行
grid-template-areas "title title header header"
"time time swiper swiper"
"block1 block2 swiper swiper"
"block3 block4 swiper swiper"
"block5 block6 swiper swiper"
"block7 block7 video info"
查看1条回复
给你个例子看看，欢迎采纳
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grid-template-areas</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.container{
border:1px solid #000;
width:600px;
height:200px;
margin:50px auto;
display:grid;
/*repeat(repeat,value)函数，只试用于下面两者*/
grid-template-columns:100px repeat(2,200px) 100px;
grid-template-rows:repeat(2,100px);
/*第一行与第二行之间用空格隔开即可，需要用双引号包裹起来*/
grid-template-areas:"one area area two"
"three area area four";
/*align-items:center;*/
/*justify-items:center;*/
text-align:center;
line-height:100px;
/*place-items:center;*/
}
/*相同区域的取同一个名字即可*/
.container>div:nth-child(1){
background:blue;
grid-area:one;
}
.container>div:nth-child(2){
background:#fff;
grid-area:area;
}
.container>div:nth-child(3){
background:#fff;
grid-area:area;
}
.container>div:nth-child(4){
background:red;
grid-area:two;
}
.container>div:nth-child(5){
background:yellow;
grid-area:three;
}
.container>div:nth-child(6){
background:#fff;
grid-area:area;
}
.container>div:nth-child(7){
background:#fff;
grid-area:area;
}
.container>div:nth-child(8){
background:orange;
grid-area:four;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div></div>
<div></div>
<div>2</div>
<div>3</div>
<div></div>
<div></div>
<div>4</div>
</div>
</body>
</html>举报
0/150
提交
取消
