请教grid-template-areas，用stylus怎么写啊？出不来应有的效果
来源：5-4 self
兰亭一梦
2019-04-07 01:51
用stylus来写网格区域，引用的时候，出不来效果，正常的css没问题，特请教。
写回答
关注
2回答
-
- 兰亭一梦
- 2019-04-07 23:02:19
写成一行程序没问题，程序正常执行
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"
-
- WindBelll
- 2019-04-07 19:36:01
给你个例子看看，欢迎采纳 <!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>
Grid布局基础
Grid二维网格布局系统，跟随时代潮流，掌握新一代的布局方案。
13165 学习 · 19 问题
相似问题