grid布局快速入门
Grid布局快速入门
常用Grid布局属性介绍
下面从一个简单Grid布局例子说起。
CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是实际的 grid(网格),items 是 grid(网格) 内的内容。
下面是一个 wrapper 元素,内部包含6个 items :
<div class="wrapper">
<div class="item div1">1</div>
<div class="item div2">2</div>
<div class="item div3">3</div>
<div class="item div4">4</div>
<div class="item div5">5</div>
<div class="item div6">6</div>
</div>
要把 wrapper 元素变成一个 grid(网格),只要简单地把其 display 属性设置为 grid 即可
.wrapper {
display: grid;
}
Columns(列) 和 rows(行)
为了使其成为二维的网格容器,我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row和grid-template-column属性。
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
grid-template-columns的3个值表示三列,相应的数值表示列宽即都为100px。
grid-template-rows的2个值表示两行,相应的数值表示行高即都为50px
得到的结果如下:
我们可以变化一下行高跟列宽的值看下效果,代码:
.wrapper {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 100px 50px;
}
效果图:
持续更新,欢迎大家指导!
grid布局快速入门的更多相关文章
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- grid布局——从入门到放弃
基本知识 CSS grid 布局有两个核心组成部分:wrapper(网格容器,父元素)和items(网格项,子元素). 基本属性 属性 含义 display: grid 网格布局(父元素设置) gri ...
- Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border
上一篇,介绍了Canvas布局控件在Blend中的使用.本篇继续介绍布局控件StackPanel,ScrollViewer和Border. 相对于Grid和Canvas来说,StackPanel,Sc ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- Expression Blend实例中文教程(3) - 布局控件快速入门Grid
上一篇对Blend 3开发界面进行了快速入门介绍,本篇将基于Blend 3介绍Silverlight控件.对于微软开发工具熟悉的朋友,相信您很快就熟悉Blend的开发界面和控件. XAML概述 Sil ...
- WPF快速入门系列(1)——WPF布局概览
一.引言 关于WPF早在一年前就已经看过<深入浅出WPF>这本书,当时看完之后由于没有做笔记,以至于我现在又重新捡起来并记录下学习的过程,本系列将是一个WPF快速入门系列,主要介绍WPF中 ...
随机推荐
- mysqldump - 备份 MySQL 数据库
参考资料 备份 备份所有数据库中的所有数据(包括系统数据库) –all-databases 通过 --all-databases 选项备份所有的数据库: mysqldump -uroot -p --a ...
- python字符串常见操作
字符串常见操作 如有字符串mystr = 'hello world itcast and itcastcpp',以下是常见的操作 <1>find 检测 str 是否包含在 mystr中,如 ...
- 【NOIP2017】列队【可持久化线段树】
题目链接 题目描述 Sylvia 是一个热爱学习的女孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有n×mn×m名学生,方阵的行数为 n ...
- Ajax表单提交给C#后台选中的checkbox值
HTML页面: <input name="payWay" type="checkbox" value="1" /> <i ...
- 5G网络的深度强化学习:联合波束成形,功率控制和干扰协调
摘要:第五代无线通信(5G)支持大幅增加流量和数据速率,并提高语音呼叫的可靠性.在5G无线网络中共同优化波束成形,功率控制和干扰协调以增强最终用户的通信性能是一项重大挑战.在本文中,我们制定波束形成, ...
- Python入门习题1.温度转换
这一节的课堂例题为: 例1.编写一个Python程序,完成摄氏度到华氏度,华氏度到摄氏度的温度转换. 解: (1)分析问题:利用程序实现温度转换,由用户输入温度值,程序给出输出结果. (2)划分边界: ...
- Angular2+之模态框-使用ngx-bootstrap包中的模态框组件实现
模态框是项目中经常会用到的一个公共功能,通常会被用左提示框或者扩展选项框. 下面,我用一个小例子来简单展示实现模态框功能的过程: 1.为项目加包: ng add ngx-bootstrap 2.在xx ...
- 关于URL和URI的最简单理解
以下面网址为例: http://www.sina.com/news/1.html 那么,http://www.sina.com/news/1.html就表示URL,用于标识互联网中的某一资源:/new ...
- 无法删除VMware旧版本,请与技术小组联系
问题:把文件夹清理了n遍,却无法重装VMware,报错如标题. 原因:相关注册表没删完. 解决办法: - 1.创建一个.txt文本 - 2.将下面的内容复制到.txt文本中: echo off cls ...
- shell本地变量和环境变量的对比