在CSS网格布局中如何使用grid-template-*属性


当前第2页 返回上一页

grid-template-columns属性用于设置网格容器的列属性,其实就相当于列的宽度。当我们需要几列展示时,就设置几个值

1

2

3

4

5

6

7

8

9

10

.grid {

  display: grid;

  grid-gap: 10px; /* add spacing for better visibility */

  grid-auto-rows: 30px;

  grid-template-rows: 100px 100px ;

  grid-template-columns: 150px 150px;

  background-color: skyblue;

 

}

.cell{  border:5px solid pink;}

效果图:

Image 8.jpg

总结:以上就是本篇文章的全部内容了,希望对大家学习网格布局有一定的帮助。

以上就是在CSS网格布局中如何使用grid-template-*属性的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

在css网格布局中如何使用grid-template-*属性

更多相关阅读请进入《grid-template-*》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...