Grid布局

Grid布局

Gird布局是什么?

Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。

Grid布局

CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是实际的 grid(网格),items 是 grid(网格) 内的内容。

下面是一个 父元素,内部包含6个 子元素 :

<div class="box">
       <div style="background:skyblue;">1</div>
       <div style="background:darkblue;">2</div>
       <div style="background:saddlebrown;">3</div>
       <div style="background:fuchsia;">4</div>
       <div style="background:springgreen;">5</div>
       <div style="background:gold;">6</div>
</div>

blank

为了使其成为二维的网格容器,我们需要定义列和行:
创建3行(columns)2列(rows)

 .box{           
            display: grid;
            grid-template-columns: 50px 50px 50px;
            grid-template-rows: 50px 50px;
        }

grid-template-columns 创建列;创建几列就在后面写几个值;
grid-template-rows 创建行;创建几行就在后面写几个值;

效果图为:

blank

为了确保能正确理解这些值与网格外观之间的关系,请看一下这个例子。

CSS代码

.box{
          display: grid;
          grid-template-columns: 300px 150px 50px;
          grid-template-rows: 150px 50px;
        }

效果为:

blank

是不是非常好理解,使用起来也非常简单是不是?

觉得对您有帮助,麻烦您点个关注,如有不足,请多指教!

转载于:https://blog.51cto.com/14322367/2401799

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100890.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • ansi unicode_ansi unicode utf-8

    ansi unicode_ansi unicode utf-8利用今天一天的时间,研究了一下ANSI编码和Unicode编码的不同,下面把我的研究成果写下来,以备日后参考。       ANSI编码最常见的应用就是在Windows当中的记事本程序中,当新建一个记事本,默认的保存编码格式就是ANSI,ANSI应该算是一种压缩编码了,当遇到标准的ASCII字符时,采用单字节表示,当遇到非标准的ASCII字符(如中文)时,采用双字节表示。

  • Creating Server TCP listening socket *:6379: bind: No error

    Creating Server TCP listening socket *:6379: bind: No error在Windows下启动redis报错:CreatingServerTCPlisteningsocket*:6379:bind:Noerror如图所示:解决方案:直接在命令行中输入:redis-cli.exe如下图所示:然后再输入:shutdown意思就是关闭的意思,如下图所示;然后再输入:exit意思就是退出的意思,如下图所示;然后重新输入启动命令:red…

  • 通达信资金净流入公式_通达信主力资金净流入指标

    V1:=(C*2+H+L)/4*10;V2:=EMA(V1,13)-EMA(V1,34);V3:=EMA(V2,5);V4:=2*(V2-V3)*5.5;庄家秘密撤:IF(V4<=0,V4,0),COLOR00FF00,LINETHICK2;庄家秘密进:IF(V4>=0,V4,0),COLORFF00FF,LINETHICK2;V5:=(HHV(INDEXH,8)-INDEXC)/…

  • selenium无界面操作自动操作浏览器了解一下

    selenium无界面操作自动操作浏览器了解一下

  • springboot自动装配原理简书_万能轧机的装配原理

    springboot自动装配原理简书_万能轧机的装配原理学习SpringBoot,绝对避不开自动装配这个概念,这也是SpringBoot的关键之一本人也是SpringBoot的初学者,下面的一些总结都是结合个人理解和实践得出的,如果有错误或者疏漏,请一定一定一定(不是欢迎,是一定)帮我指出,在评论区回复即可,一起学习!篇幅较长,希望你可以有耐心.如果只关心SpringBoot装配过程,可以直接跳到第7部分想要理解spring自动装配,需要明确两个含义:装配,装配什么?自动,怎么自动?文章目录1.Warmup1.1 setter注入1

  • 双飞翼布局和圣杯布局

    双飞翼布局和圣杯布局实现左右固定宽度,中间自适应的布局(中间先加载渲染),代码如下<!DOCTYPEhtml><html> <head> <metacharset=”utf-8″/> <title>css</title> </head> <styletype=”text/css”> *…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号