grid实现响应式布局

一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

在这篇文章中,我将教你如何使用 CSS Grid(网格) 布局来创建一个超酷的图像网格,它会根据屏幕的宽度改变列的数量,以实现响应式布局。

而这篇文章中最漂亮的部分是:添加一行 CSS 代码即可实现响应式布局。

这意味着我们不必通过丑陋的类名(即 col-sm-4col-md-8)来混淆 HTML ,或者为每一个屏幕尺寸创建媒体查询。

现在就让让我们开始吧!

设置

对于本文,我们将继续使用 5分钟学会 CSS Grid 布局 文章中使用的网格。然后我们将在文章的最后添加图片。以下是我们的初始网格的外观:

这是HTML:

HTML 代码:

  1. <div class="container">
  2. <div>1</div>
  3. <div>2</div>
  4. <div>3</div>
  5. <div>4</div>
  6. <div>5</div>
  7. <div>6</div>
  8. </div>

还有相应的 CSS :

CSS 代码:

  1. .container {
  2. display: grid;
  3. grid-template-columns: 100px 100px 100px;
  4. grid-template-rows: 50px 50px;
  5. }

注意:这个例子也有一些基本的样式,比如容器宽度,网格间隔,背景颜色什么的,我不会在这里介绍,因为它与 CSS Grid 没有任何关系。

如果这段代码让你感到困惑,我建议你阅读 5分钟学会 CSS Grid 布局 这篇文章,在那里我解释了 Grid 布局模块的基础知识。

让我们开始将 列 实现响应式布局。

使用等分(fr)单位实现基本的响应式

CSS Grid 带来了一个全新的值,称为等分单位,即 fr 。它允许你将容器可用空间分成你想要的多个等分空间。

让我们将每个列更改为一个等分单位宽度。

CSS 代码:

  1. .container {
  2. display: grid;
  3. grid-template-columns: 1fr 1fr 1fr;
  4. grid-template-rows: 50px 50px;
  5. }

这里发生的事情是,将整个网格的宽度分成三等分,每一列都占据一个 fr 单位。结果是:

如果我们将 grid-template-columns 的值更改为 1fr 2fr 1fr,那么第 2 列现在将是另外 2 列的 2 倍。总宽度现在是 4 等分,第 2 列占据了 2 等分,而其他 2 列则各占 1 等分。看起来类似这样:

换句话说,等分单位值使你可以非常容易地改变列的宽度。

更加高级的响应式

但是,上面的例子并没有给我们想要的响应式,因为这个网格总是包含 3 列。我们希望我们的网格根据容器的宽度来改变列的数量。要做到这一点,你必须学习三个新的概念。

repeat()

我们将从 repeat() 函数开始。 这是指定列和行更强大的方法。 让我们把原来的网格改成使用 repeat() :

CSS 代码:

  1. .container {
  2. display: grid;
  3. grid-template-columns: repeat(3, 100px);
  4. grid-template-rows: repeat(2, 50px);
  5. }

换句话说,repeat(3, 100px) 与 100px 100px 100px 相同。 第一个参数指定了你想要的列数或行数,第二个参数指定了它们的宽度,所以上面的代码将为我们创建和第一个一样的布局。

auto-fit (自适应)

然后是自适应。让我们跳过固定数量的列,而是用 auto-fit 取代 3 。

CSS 代码:

  1. .container {
  2. display: grid;
  3. grid-gap: 5px;
  4. grid-template-columns: repeat(auto-fit, 100px);
  5. grid-template-rows: repeat(2, 100px);
  6. }

这会达到以下效果:

你会看到,现在这个网格已经可以通过容器的宽度来改变列的数量。

它只是试图尽可能多地将 100px 宽的列排列在容器中。

但是,如果我们将所有列硬编码为 100px ,我们永远得不到我们想要的灵活性,因为它们很少会加起来正好等于容器的宽度。正如你在上面的 gif 图中所看到的,网格通常会在右侧留下空白区域。

minmax()

为了解决这个问题,我们需要的最后一方法是 minmax()。我们只需用 minmax(100px, 1fr) 替换 100px 即可。这是最终的CSS。

CSS 代码:

  1. .container {
  2. display: grid;
  3. grid-gap: 5px;
  4. grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  5. grid-template-rows: repeat(2, 100px);
  6. }

注意,所有的响应都发生在一行 CSS 中。

这会达到以下效果:

正如你们所见,这样很完美。minmax() 函数定义大于或等于 min 且小于或等于 max 的大小范围。

所以现在列的宽度至少 100px 。但是,如果有更多的可用空间,网格将简单地分配给每个列,因为列的值变成了一个等分单位 1fr ,而不是 100px 。

添加图片

现在最后一步是添加图片。 这与 CSS Grid 没有任何关系,但是我们还是要来看看代码。

我们将在每个网格项内添加一个 img 标签。

HTML 代码:

  1. <div><img src="img/forest.jpg"/></div>

为了使图像适合该网格项,我们将它设置为与网格项一样宽和高,然后使用 object-fit: cover;。这将使图片覆盖整个容器,如果需要的话,浏览器会裁剪该图片。

CSS 代码:

  1. .container > div > img {
  2. width: 100%;
  3. height: 100%;
  4. object-fit: cover;
  5. }

效果如下:

就是这么简单!你已经了解了 CSS Grid 中最复杂的概念之一,所以后面请自己动手吧。

浏览器支持

在我们结束之前,我还需要提及浏览器的支持。在写这篇文章的时候,占全球 77% 的网站流量的浏览器支持CSS Grid,而且正在攀升。

我相信 2018 年将是 CSS Grid 大量应用的一年。很快会得到突破,并将成为前端开发人员的必备技能。就像过去几年在 CSS Flexbox 所发生的一样。

原文地址:https://www.cnblogs.com/yuan619821/p/8269894.html

时间: 2024-11-13 04:45:17

grid实现响应式布局的相关文章

html5 响应式布局

响应式布局 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端. 第二:响应式设计的步骤 响应式设计的步骤就是1.编

Bootstrap响应式布局

Bootstrap响应式布局可以使用栅格化系统,在桌面>970px上变为水平排列,方法: 1.包含在.container或.container-fluid中 2.使用.col-md-*栅格类,创建栅格系统 典型布局: <div class="container"> <div class="row"> <div class="col-md-4">d</div> <div class=&qu

推荐12个创建响应式布局的优秀网格框架

在这篇文章中,我们为大家推荐12个创建响应式布局的优秀网格框架.如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务.enjoy! 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 十个拥有丰富 UI 组件的 JavaScript 框架 十款精心挑选的在线 CSS3 代码生成工具 开发者必备的八个最佳云端集成开发环境 2012年度最佳 Web 前端开发工具和框架 Pure Pur

布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. 2.设计方法 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查

响应式布局和自适应布局的不同

学了前端一段时间了,发现大家都搅浑了自适应布局和响应式布局的差别.现在我来和大家说下它们的不同: 自适应的体验   http://m.ctrip.com/html5/响应式的体验   http://segmentfault.com/ 整理了自己查阅的知识点,给各位一些提示. 起初,网页设计者都会涉及固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时本来电脑就少,即使有变化也是800,850,870,880,比如开源中国的网页就是固定宽度为998来定制的,至于为啥是998,我也不知道...

关于静态布局、自适应布局、流式布局、响应式布局、弹性布局的一些概念

一.静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端.2.设计方法: PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅

创建响应式布局----使用栅格

1.Pure Grids : 创建你所需栅格系统的环境,CSS框架 2.BootStrap 3.Foundation:发布了一些优秀的模态.灯箱和内容滑块的解决方案:用于创建一个流式12列栅格 4.Gridpak:根据你的输入生成栅格系统 5.Golden Grid System:一个易于使用的18列栅格,旨在支持从小屏幕到比2560px更高分辨率的各种屏幕 6.Frameless:处理灵活的响应式布局 7.响应式设计具有弹性.灵活的特点:自适应布局则是固定.静态的.或者在布局上体现出严谨 8.

CSS3的响应式布局Home / HTML/CSS / CSS3的响应式布局

做手机端网页需要用到响应式布局,首先需要再HTML文件头声明一下: 主要目的是宽度控制和禁止用户缩放,具体参数自己GOOGLE一下. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 下面是CSS判断是PC端还是移动端其实很简单,用CSS3的媒体查询

页面布局的几种方式(静态化布局,流式布局,自适应布局,响应式布局,弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. https://developers.google.com/search/mobile-sites/mobile-seo/respon