从实例中学习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布局相关推荐

深入了解css中的grid布局
只说概念可能理解的慢,我们通过做一个小布局,把Gird相关的知识点总结一下.保证你看完之后,grid布局也就学的差不多了. 先看看我们的第一个小例子最终的效果图: 下面是我们的HTML代码 <d ...
使用 CSS Grid Generator来快速使用及学习 Grid 布局
CSS Grid Generator CSS Grid Generator 是一个由Sarah Drasner创建的免费工具.它是一个可视化设计工具,允许咱们创建一个基本的 grid 布局,然后就可以 ...
python中grid函数_python tkinter中的grid布局是什么？
之前跟大家讲过登录界面是怎么设置的,但是被大家吐槽了一番,原因是因为设置的窗口状态并不好看,大家拿来了公认为比较好看的登录界面,希望可以设置出一样的效果,在python里没有什么是不可能实现的,因此, ...
从一个实例中学习DTW算法
基于动态时间规整算法(DTW)的相似度计算 Killer 发表于(2015-10-063) 本文标签:大数据机器学习算法浏览量:193次喜欢收藏在孤立词语音识别中,最为简单有效的方法是 ...
HMM学习笔记_1(从一个实例中学习DTW算法)
DTW为(Dynamic Time Warping,动态时间归准)的简称.应用很广,主要是在模板匹配中,比如说用在孤立词语音识别,计算机视觉中的行为识别,信息检索等中.可能大家学过这些类似的课程都看到 ...
Android布局管理器-从实例入手学习相对布局管理器的使用
场景 AndroidStudio跑起来第一个App时新手遇到的那些坑: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103797 ...
display属性_前端基础：Grid 布局教程，重新复习grid布局的容器和项目属性
链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 一.概述它将网页划分成一个个网格,可以任意组合不同的网格,做出 ...
grid布局浏览器兼容_CSS Grid 网格布局教程
一.概述网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
超级强大的网格grid布局
超级强大的网格grid布局一.概述二.基本概念 1. 容器和项目 2.行和列 3.单元格 4.网格线三.容器属性 1. display 属性 2.grid-template-columns 属性 ...
第8天：布局翘楚 - Grid 布局概述
昨天的内容第7天: position 布局之绝对布局 absolute 比较简单,今天再来点比较难,也比较重要的内容,回过头再把 position 的内容补全,难易结合. grid 是一种网格布局,之 ...

从实例中学习grid布局

从实例中学习grid布局相关推荐

最新文章

热门文章