从实例中学习grid布局
对于Web开发者来说,网页布局一直是个比较重要的问题。 Web 布局主要经历了以下四个阶段:
1、table表格布局;
2、float浮动及position定位布局;
3、flex弹性盒模型布局,革命性的突破,解决传统布局方案上的三大痛点 “排列方向”、“对齐方式”,“自适应尺寸”。是目前最为成熟和强大的布局方案;
4、grid栅格布局,二维布局模块,具有强大的内容尺寸和定位能力,适合需要在两个维度上对齐内容的布局。随着 CSS Grid 的出现,网格变得更加简单。我们不再需要担心网格中遇到的复杂计算。
下面我们通过几个实例来讲述它的使用方法:
1.实现4列固定宽度的栅格布局,只要在 grid-template-columns
声明中写四次 100px 即可
:
.grid {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-column-gap: 20px;
}
2.响应式网格
——方法1:使用fr为单位
.grid-fr {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 20px;
min-height: 70px;
margin-top: 20px;
}
希望 fr 单位每次都创建等宽列,则需要使用 minmax(0, 1fr) 去强制指定它。
.grid-fr_same {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
——方法2:媒体查询
@media (max-width: 960px) {
.grid-fr_media {
grid-template-columns: repeat(2, 1fr);
}
}
3.基于高度的网格:通过grid + calc 搭配使用
.grid-fr_height {
height: 500px;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-auto-columns: calc((500px - 3em) / 4);
grid-auto-flow: column;
grid-gap: 1em;
} .grid-fr_height .grid-item:nth-child(3n) {
background-color: red;
} .grid-fr_height .grid-item:nth-child(3n + 2) {
background-color: orange;
}
4.网格项的放置:
关键字:grid-row(grid-row-star和grid-row-end的缩写),
grid-column(grid-column-star和grid-column-end的缩写)
通过 span
关键字告诉网格项应该占用多少列。
.grid-fr_select .grid-item {
/* 放在第二列,跨越 2 列 */
grid-column: 2 / span 2;
background-color: red;
}
上面所有例子的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS-grid</title>
<style> .grid {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-column-gap: 20px;
min-height: 70px;
} .grid-item {
background-color: #f2f2f2;
padding: 15px;
} .grid-fr {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 20px;
min-height: 70px;
margin-top: 20px;
} .grid-fr_same {
grid-template-columns: repeat(4, minmax(0, 1fr));
} .grid-fr_same img {
max-width: 100%;
} .grid-fr_different {
grid-template-columns: 1fr 1.618fr 2.618fr;
} @media (max-width: 960px) {
.grid-fr_media {
grid-template-columns: repeat(2, 1fr);
}
} .grid-fr_height {
height: 500px;
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-auto-columns: calc((500px - 3em) / 4);
grid-auto-flow: column;
grid-gap: 1em;
} .grid-fr_height .grid-item:nth-child(3n) {
background-color: red;
} .grid-fr_height .grid-item:nth-child(3n + 2) {
background-color: orange;
} .grid-fr_select .grid-item {
/* 放在第二列,跨越 2 列 */
grid-column: 2 / span 2;
background-color: red;
}
</style>
</head>
<body>
<h3>固定宽网格</h3>
<div class="grid">
<div class="grid-item">每列的宽度为100px</div>
<div class="grid-item">每列的宽度为100px</div>
<div class="grid-item">每列的宽度为100px</div>
<div class="grid-item">每列的宽度为100px</div>
</div>
<h3>响应式网格:方法1:使用fr为单位</h3>
<div class="grid-fr">
<div class="grid-item">fr 是代表一个片段的灵活长度单位。</div>
<div class="grid-item">当你使用 fr 单位时,浏览器会分割开放空间并根据 fr 倍数将区域分配给列。</div>
<div class="grid-item">使用fr为单位</div>
<div class="grid-item">使用fr为单位</div>
</div>
<h3>使用 fr 单元创建的网格并不总是相等的!</h3>
<div class="grid-fr">
<div class="grid-item">
<img src="img/2.jpg"/>
</div>
<div class="grid-item">每个 fr 单位是可用(或剩余)空间的一个小片段。</div>
<div class="grid-item">如果你的元素比使用 fr 单位创建的任何列都要宽,则需要以不同的方式进行计算。</div>
<div class="grid-item"></div>
</div>
<h3>希望 fr 单位每次都创建等宽列,则需要使用 minmax(0, 1fr) 去强制指定它。</h3>
<div class="grid-fr grid-fr_same">
<div class="grid-item">
<img src="img/2.jpg"/>
</div>
<div class="grid-item">通过minmax()函数来创建网格轨道的最小或最大尺寸</div>
<div class="grid-item">minmax()函数接受两个参数:第一个参数定义网格轨道的最小值,第二个参数定义网格轨道的最大值。</div>
<div class="grid-item">可以接受任何长度值,也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。</div>
</div>
<h3>不等宽网格</h3>
<div class="grid-fr grid-fr_different">
<div class="grid-item">只需更改 fr 倍数,就可以创建宽度不等的网格。</div>
<div class="grid-item">比如:grid-template-columns: 1fr 1.618fr 2.618fr;</div>
<div class="grid-item">表示:第二列是第一列的 1.618 倍,第三列是第二列的 1.618 倍。</div>
</div>
<h3>repeat()</h3>
<div class="grid-fr">
<div class="grid-item">repeat()可以创建重复的网格轨道。</div>
<div class="grid-item">适用于创建相等尺寸的网格项目和多个网格项目。</div>
<div class="grid-item">repeat()接受两个参数:第一个参数定义网格轨道应该重复的次数,第二个参数定义每个轨道的尺寸。</div>
<div class="grid-item">比如这个例子就可以写成 grid-template-columns: repeat(4,1fr)</div>
</div>
<h3>响应式网格:方法2:媒体查询</h3>
<div class="grid-fr grid-fr_media">
<div class="grid-item">使用 @media (min-width: ***) {} 进行断点</div>
<div class="grid-item">当你使用 fr 单位时,浏览器会分割开放空间并根据 fr 倍数将区域分配给列。</div>
<div class="grid-item">使用fr为单位</div>
<div class="grid-item">使用fr为单位</div>
</div>
<h3>基于高度的网格</h3>
<div class="grid-fr_height">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<h3>网格项的放置</h3>
<div class="grid-fr grid-fr_select">
<div class="grid-item">可以通过 span 关键字告诉网格项应该占用多少列。</div>
<div class="grid-item">可以通过 span 关键字告诉网格项应该占用多少列。</div>
<div class="grid-item">可以通过 span 关键字告诉网格项应该占用多少列。</div>
</div>
</body>
</html>
本篇文章是基于 新的 CSS 特性正在改变网页设计 做的一个简单笔记。更多详细内容可阅读原文。
阅读此文适用于对grid有个初步了解。想要更深入的,可访问 grid栅格布局。
从实例中学习grid布局的更多相关文章
- wpf后置代码中的Grid布局以及图片路径的设置
之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...
- 图文详解前端CSS中的Grid布局,你真的可以5分钟掌握
前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...
- css 中的grid布局基础
CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...
- web前端——实例中学习css,javascript
最近闲暇时候在研究前端的样式和js,以前都是从w3school上看看那些选择器和DOM操作方法很少去实际做demo来研究,做的过程当中才真切感觉到纸上得来终觉浅,看得懂跟能做出东西完全两码事,尤其在定 ...
- 在微信小程序中学习flex布局
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...
- Android布局管理器-从实例入手学习相对布局管理器的使用
场景 AndroidStudio跑起来第一个App时新手遇到的那些坑: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103797 ...
- 手把手教你grid布局
概述 目前css布局方案中,网格布局可以算得上是最强大的布局方案了.它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局. 基本概念 在学习grid布局之前,我们需要了解一些基本概念 1 ...
- 轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...
- 学习ExtJS的grid布局
这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...
随机推荐
- VS2005自定义ActiveX控件在asp.net中应用方法
原文地址:http://www.cnblogs.com/zhf/archive/2009/03/02/1401299.html 开发环境为VS 2005, .NET framework 2.0 文件— ...
- 原生js,插入元素
function insert(){ var tarDiv = document.getElementById("aId"); var newDiv = document.crea ...
- 工作总结 EntityFramework中出现DateTime2异常的完美解决办法
EntityFramework中出现DateTime2异常的完美解决办法 今天在使用entityframework往数据库插入数据的时候,突然出现了一个数据类型转换异常的问题: System.Da ...
- Fragment中获取Activity的Context
Fragment中获取Activity的Context时只需要this.getActivity()即可.
- ant-jmeter批量脚本
<?xml version="1.0"?> <project name="autotest" default="all" ...
- Hspice仿真打印某个子模块中所有信号信息
简单的说就是在你要打印的子模块中加一句:.probe v(*) i(*)就可以了,这个子模块的每一个实例都会被打印出来.
- 统计学习方法:支撑向量机(SVM)
作者:桂. 时间:2017-05-13 21:52:14 链接:http://www.cnblogs.com/xingshansi/p/6850684.html 前言 主要记录SVM的相关知识,参考 ...
- libgdx 1.4.1公布
(转载自http://www.libgdx.cn/topic/4/libgdx-1-4-1%E5%8F%91%E5%B8%83) libgdx从未停止进步的脚步.10月10日.libgdx1.4.1公 ...
- 在verilog中调用VHDL模块
习惯了自己发现一些小问题,既然发现了,就记下来吧,不然又要忘了,这是多么悲痛的领悟. 今天在用vivado进行块设计时所生成的顶层模块居然是用VHDL语言描述的,这时郁闷了,表示只看过VHDL语法但没 ...
- C++ function pointer and type cast
http://www.cprogramming.com/tutorial/function-pointers.html http://www.cplusplus.com/doc/tutorial/ty ...