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

    css中grid布局的使用

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

    说明

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

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

    实例

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    .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学习网