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>

Grid布局

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

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

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

效果图为:

Grid布局

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

CSS代码

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

效果为:

Grid布局

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

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

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

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

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

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

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

(0)


相关推荐

  • 前端工程师vscode必备插件(20个)

    前端工程师vscode必备插件(20个)阶段:前端新手只会html、css、js1.Chinese汉化vscode2.TokyoNightMaterialTheme已经下架了,这个是目前来说个人认为vscode中最好看的主题。3.vscode-icons文件的图标,这个是看着最顺眼的图标。4.prettier代码格式化工具,代码自动格式化。(需配置,最下面放上代码)如果安装了vetur,则会产生冲突,需要手动右键格式化,选择prettier。5.openinbrowser打开浏览器插件。

  • matlab 定位_matlab读取mp3音频文件

    matlab 定位_matlab读取mp3音频文件PAGEPAGE1毕业设计(论文)基于MATLAB的声源定位系统专业年级07级应用物理学学号姓名指导教师评阅人二○一一年六月中国南京河海大学本科毕业设计(论文)任务书(理工科类)Ⅰ、毕业设计(论文)题目:基于matlab系统声源识别与实时定位初步研究Ⅱ、毕业设计(论文)工作内容(从综合运用知识、研究方案的设计、研究方法和手段的运用、应用文献资料…

  • windows下thrift的使用(python)

    windows下thrift的使用(python)

    2021年11月19日
  • python大数据分析实例-用Python整合的大数据分析实例

    python大数据分析实例-用Python整合的大数据分析实例用Python进行数据分析的好处是,它的数据分析库目前已经很全面了,有NumPy、pandas、SciPy、scikit-learn、StatsModels,还有深度学习、神经网络的各类包。基本上能满足大部分的企业应用。用Python的好处是从数据抽取、数据收集整理、数据分析挖掘、数据展示,都可以在同一种Python里实现,避免了开发程序的切换。这里就和大家分享我做的一个应用实例。解决问题:自动进…

  • recv、recvfrom[通俗易懂]

    recv、recvfrom[通俗易懂]1、recvfrom()接收一个数据报并保存源地址。(这里是windows中的头文件,Linux的用法在下面的那个实例)头文件:#include  #includeintrecvfrom(ints,void*buf,intlen,unsignedintflags,structsockaddr*from,int*fromlen);s:标

  • es6 转es5_es6转换es5

    es6 转es5_es6转换es5为什么要es6转es5?答:es6代码在老版本的浏览器中无法执行。怎么将es6代码转为es5代码,让其在老版本的浏览器中执行?答:使用babel模块,babel是一个使用非常广泛的es6转换器,这就意味着我们可以将es6代码转为es5代码,从而在老版本的浏览器中执行。使用步骤:新建一个新的用来编写es6代码的文件夹,进入到该文件中,初始化一个项目npminit表示一步步通过配置来初始化一个项目npminit-y表示使用默认设置来快速初始化一个项目局部安装babel-cli

发表回复

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

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