grid网格代码及注释

最新推荐文章于 2020-11-01 20:06:13 发布

转载最新推荐文章于 2020-11-01 20:06:13 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zj1997/p/9786602.html

本文介绍了一个使用CSS Grid布局的示例，通过repeat和auto-flow属性创建重复且自适应的网格结构，展示了如何设置div元素的背景颜色、宽度和高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

< div  id = “ container ” > 
  < div > </ div > 
  < div > </ div > 
  < div > </ div > 
  < div > </ div > 
  < div > </ div > 
  < div > </ div > 
  < div > </ div > 
  < div > </ div > 
</div >
css部分：

#container {
  display: grid; /*显示网格*/
  grid: repeat(2, 60px) / auto-flow 80px;/*这个网格重复2次密集*/
}

#container > div {
  background-color: #8ca0ff;/*设置背景颜色*/
  width: 50px;/*宽50*/
  height: 50px;/*高50/
}
运行结果