• 技术文章 >Web开发 >css教程

    css中grid布局的使用

    小妮浅浅小妮浅浅2021-09-27 09:43:16原创4356

    说明

    1、通过display属性设置属性值为grid或inline-grid或者是subgrid就可以了。

    2、当元素设置了网格布局,column、float、clear、vertical-align属性无效。

    实例

    在CSS中,不设置 grid-template-columns,只设置 grid-template-row。

            .grid-container{
                display: grid;
                grid-template-rows: 50px 80px 100px;
                background: pink;
            }
            .item{
                border: 2px solid palegoldenrod;
                color: #fff;
                text-align: center;
                font-size: 20px;
            }

    以上就是css中grid布局的使用,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:cssgrid布局
    上一篇:css中grid网格布局的介绍 下一篇:css中minmax()函数的使用

    相关文章推荐

    • Vue框架在PostCSS中使用sass的方法• CSS实现轮播图的方法• css内联样式的盒子模型• css标签选择器的使用注意• css中id选择器的注意点• css中类选择器的注意事项• css后代选择器的使用• css子元素选择器的介绍• css后代选择器和子元素选择器的区别• CSS并集选择器的介绍• CSS兄弟选择器的两种类型• css中使用a标签的伪类选择器注意点• css盒模型布局是什么• css中flex布局如何使用• css中grid网格布局的介绍

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网