grid布局实现响应式图片网格

最新推荐文章于 2024-05-14 00:59:57 发布
最新推荐文章于 2024-05-14 00:59:57 发布
阅读量1.5k 收藏 11
点赞数 5
分类专栏： 前端基础 文章标签： 响应式布局 grid布局 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44202459/article/details/88726538
版权
该博客介绍如何利用CSS Grid布局实现响应式图片网格，重点讲解了等分单位的概念，以及在grid布局中指定列和行的方法，包括列数自适应和网格项目的宽度范围设置。并给出了具体的HTML和CSS实现代码。
摘要由CSDN通过智能技术生成

任务目标

  • 利用grid布局实现响应式图片网格，如下图：
    示意图

核心概念

  • fr：CSS Grid 带来的一个全新值，称为等分单位 。它允许将容器可用空间分成想要的多个等分空间
  • repeat()函数：grid布局中指定列和行更强大的方法
  • auto-git：列数自适应
  • minmax()函数：定义网格项目的宽度范围

实现代码

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA
最低0.47元/天 解锁文章
凡大喵
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTMLCSS学习笔记（二十三）GRID布局
关注我！带你一路 "狂飙" 到底！
11-24 452
则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。有一定的相似性，都可以指定容器内部多个项目的位置。划分网格的线，称为"网格线"。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。6、设置单元格内容在单元格内 水平 | 垂直 的对齐方式。7、设置整个内容区域在容器里面的水平 | 垂直 对齐方式。容器里面的水平区域称为"行"，垂直区域称为"列"。行和列的交叉区域，称为"单元格"。
grid简单布局
liutianxiao123的博客
04-20 77
height:calc(~'100vh - 420px'); width:100%; display: grid; grid-template-columns: repeat(5,1fr);//列高 grid-template-rows: repeat(2,1fr);//行高 row-gap: 8px;//行间距 column-gap: 8px;//列间距 div:nth-child(7){ ...
2024年前端最新教你CSS Grid布局实现响应式设计，2024前端面试心得
最新发布
2401_84123077的博客
05-14 619
使用 grid-template-columns 属性创建一个 12 列的网格，每个列都是一个单位宽度（总宽度的 1/12 ）。在页面上看到 3×2 的 grid(网格)，而我们定义的是 3×3 的 grid(网格)。使用 grid-template-rows 属性创建 3 行，第一行高度是 50px ，第二行高度是 350px 和第三行高度是 50px。由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
React-grid-layout的使用
weixin_48845614的博客
08-31 3271
简介 React-grid-layout 是一个网格布局系统，可以实现响应式的网格布局，灵活运用可以方便的实现拖拽式组件的实现 用法 基本用法 import GridLayout from 'react-grid-layout'; class MyFirstGrid extends React.Component { render() { // layout is an array of objects, see the demo for more complete usage con
Grid布局实现网页自适应
weixin_42190844的博客
11-09 6609
前言 网页自适应布局常见的方法有三种。 1.原生：使用@media媒体查询，rem相对单位。 通过对不同的屏幕宽度进行CSS的调整来实现，不同设备下的网页自适应显示效果。 适合对不同设备显示都需要进行详细且精确的自适应调整，缺点是工作量大。 例如： @media (min-width: 1200){ //>=1200的设备 } @media (max-width: 990px){ //<=990的设备 } 2.使用Bootstrap框架 Bootstrap是目前最出名的自适应布局框
网页自适应布局-grid篇
weixin_40476977的博客
07-20 4449
超实用的自适应grid布局Grid布局grid-template-columns属性响应单位frrepeat()minmax()响应图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 Grid布局 display：grid指定一个容器采用网格布局。 容器元素是块级元素，采用网格布局，我们也可以使容器为
基于grid布局实现的响应式栅格系统
09-10
在响应式栅格系统中，使用百分比或弹性单位（如`fr`）可以实现流体布局，即网格项的宽度随窗口大小变化而变化。这样，栅格系统能够自动适应各种屏幕尺寸，提供更好的用户体验。 6. 自适应断点和栅格切换： 结合...
教你CSS Grid布局实现响应式设计
01-08
为了使其成为二维的网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row和grid-template-column属性。 .wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-...
html5响应式动态网格图片瀑布流布局
09-01
综上所述，HTML5响应式动态网格图片瀑布流布局结合了HTML5的语义化元素和媒体查询、CSS3的Flexbox或Grid布局以及JavaScript的动态加载和布局算法，提供了一种高效、美观且适应性强的网页设计解决方案。无论是在大...
CSS3响应式网格图片悬停特效
06-24
【CSS3响应式网格图片悬停特效】是一种利用CSS3技术实现的网页设计方法，它在网页中构建了一个灵活的网格系统，用于展示图片，并在鼠标悬停时呈现出丰富的动画效果。这种特效使得网页在不同设备上都能自适应地显示，...
静态grid网格响应式布局项目
03-25
综上所述，这个项目结合了现代前端开发中的多个核心技术，旨在创建一个既美观又实用的响应式网格布局网页。Grid布局和响应式设计构建了基础框架，Glide、Anime、Isotope和ScrollReveal则分别提升了交互性、动画效果...
响应式的grid图片多行两列布局
qq_33960741的博客
01-13 1336
使用grid-template-columns:1fr1fr; 保证有两列图片，img标签的属性设置为 width:100%; height:auto; 则可以保证图片自适应放大缩小，如果想要让图片在过小宽度时改为一行一列，则可以使用grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );每列最小为100px，即一行的宽度小于200px时将会显示为一行一列 ...
5分钟掌握Grid布局【多图示例】
weixin_34187862的博客
04-20 1495
Grid布局一览 网格系统 生成网格系统：display:gird "画"一个网格出来： grid-template-columns/rows 圈地为王（"画"一个元素）：grid-column/row 可视化布局：grid-template-areas 给网格设置gap 富余空间管理 越界处理与grid-auto-columns 自动放置与grid-auto-flow 其它现象 ...
图文并茂！为你展示Grid布局
Guo_XiCheng的博客
10-27 701
文章目录css grid布局定义行高列宽定义行列间距按区域划分网格自动创建网格行列定义网格线指定网格线名称根据网格线指定子项目位置根据网格线指定子项目位置简写形式定义排列规则行优先或列优先行密集或列密集使用关键字和函数自动填充：auto-fill按比例分割：fr自适应：auto简化重复：repeat()限定长度：minmax()定义容器的对齐方式水平方向：justify-content垂直方向：align-content简写形式：place-content定义所有子项目的对齐方式水平方向：justify-i
HTML、CSS从零开始 | GRID布局
sdasadasds的博客
12-22 669
GRID布局 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。 Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 GRID布局预热 容器和项目 <section> <div> <p></p&g
uni-app【事件绑定、下拉刷新、上传图片、导航跳转、组件通讯】
December_shi的博客
06-08 956
uni事件绑定、事件传参；uni生命周期；下拉刷新；上传图片、预览图片；uni导航跳转；创建组件；组件通讯，父子传值，兄弟组件通讯
混合app框架之uni-app---grid布局
热门推荐
hjy170314的博客
05-29 1万+
uni-app中grid布局是九宫格布局，格式已经弄好了，可以直接拿出来使用，在使用的时候想要点击获取下标的话直接写点击事件就可以打印出对应的下标了。代码如下： <!-- 个人中心页方格列表数据 --> <uni-grid @click="goToPage" :options="[ {image:'https://img-cdn-qiniu.dcloud.net....
CSS3 响应式布局之弹性网格
歪脖先生的博客
02-24 821
弹性网格当页面需要适应各种尺寸的设备时，就应该使用弹性网格，让整个布局结构根据用户行为，以及设备环境进行响应式调整。弹性网格是一个网格系统，它参考流式布局中网格系统的设计，将每个格子设置为百分比宽度，以便网格的宽度会随时根据浏览器窗口大小做出相应的调整。那如何将固定宽度的网格系统，转换成弹性网格系统对应的百分比宽度呢？响应式设计之父 Ethan Marcotte 提供了一个简单易行的公式：目标元素...
如何在grid布局中实现响应式设计？
10-22
在grid布局中实现响应式设计，可以通过设置grid-template-columns和grid-template-rows属性来实现。可以使用百分比、fr单位或者repeat()函数来定义列和行的大小。同时，可以使用@media查询来根据不同的屏幕尺寸设置...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值