移动端grid网格布局

最新推荐文章于 2024-06-15 15:52:39 发布
最新推荐文章于 2024-06-15 15:52:39 发布
阅读量2.1k 收藏 4
点赞数
分类专栏： 技巧 文章标签： css grid 网格布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingAn123/article/details/99219288
版权
本文介绍了移动端的Grid网格布局，适用于移动端块状入口门板布局，具有良好的自适应性。文中通过示例1和示例2详细展示了如何设置父级和子级的CSS样式，包括外层和内层的CSS规则。同时提到了PC端的应用，指出Grid布局在单个元素自适应方面的挑战，并提及minmax属性和等效单位的使用。
摘要由CSDN通过智能技术生成

适用于移动端块状入口门板布局，多行

应该更适用于PC端，自适应浏览器，拉伸缩小，布局改变

文章目录

一、效果

在这里插入图片描述

二、示例

1、示例1

第一种示例只需要在父级写grid布局即可
列2端对齐、中间列居中
中间行边距设值

  • html
    在这里插入图片描述
  • 外层css
    在这里插入图片描述
.parent
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端适配、响应式布局、网格布局
tian_98的博客
12-01 388
day 01 移动端适配 rem适配. rem相对于根标签字体大小计算。 2. vw适配 vw（viewport's width）,相对于视口的大小。把视口分为100份 deviceWidth = 100vm 750px = 100vm 1vm = 7.5px 375px = 100vm 1vm = 3.75px 100px = 13.3333vm - 直接以vw为单位，使用插件px2vw（设置初始width=750）
CSS第九章 移动端布局-Grid网格布局
晓葉斑比
06-03 592
CSS_移动端布局Grid网格布局作用在grid容器上的CSS属性1. grid-template-columns和grid-template-rows2. grid-template-areas3. grid-template4. grid-column-gap和grid-row-gap5. grid-gap6. justify-items7. align-items8. place-items9. justify-content10. align-content11. place-content作用在g
html移动端网格布局,移动端布局
weixin_29774611的博客
06-18 207
一、reset 和NormalizeNormalize.css 可以解决跨浏览器一致性建议同时引入二、布局单位vw 、whpx :固定单位em 、rem ： 相对单位em：相对于父元素的font-sizerem ：根(html)的font-size谷歌浏览器默认font-size是16px移动端应用最多的就是rem,相对于根元素好计算三、自适应布局引入flexible.js文件;(function...
UNI-APP Flex布局 Grid布局 绝对定位 网格布局示例
最新发布
aa33677的博客
06-15 1511
属性和样式来实现页面的垂直居中布局。同时，我们还设置了header和footer的高度和样式来实现页面布局。在实际开发中，可以根据需要使用更多的组件、布局和样式来实现各种复杂的页面布局。在uniapp中，页面布局可以使用template组件和各种内置的标签和样式来实现。标签来作为容器和布局元素，并通过。在这个示例中，我们使用了。
html移动端网格布局,移动app设计当中常见8种基础布局方案
weixin_34618526的博客
06-18 860
在实际的app设计中，要考虑信息优先级和各种布局方式的契合度，采用最合适的布局设计方案，来提高移动产品的易用性和交互体验。今天25学堂的小编给大家分享的8种常见移动端的基础布局方案，算是给大家温故而知新吧！常见的APP布局干货：1、 list 列表布局优点list列表纵向长度没有限制，上下滑动可以查看无限内容；list列表在视觉上整齐美观，用户接受度很高；list列表可以展示内容长和次级文字的标题...
适合面向手机设备开发的库
weixin_30307921的博客
08-14 190
1、jQuery MobilejQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。2、jQ...
grid布局移动端
m0_52413587的博客
01-01 490
* { margin: 0; padding: 0; box-sizing: border-box; } .main { width: 100%; padding: .72rem; } .item { width: 100%; height: 2.533333rem; /* background: skyblue; */ display: grid; grid-template-columns: .413333rem auto
day17-移动端布局&网格布局
HAI6545的博客
12-09 417
第三种布局方式 第一种方式:媒体查询+rem 第二种方式:Vw + rem(推荐第三种方式:flexible.js -阿里淘宝插件 -针对于750px的设计图设置 -阿里系的软件都使用这种适配方式(自动设置dpr)使用方法 -需要把视口标签删除 -引入相应的js文件script src-计算方式:物理像素/100 = rem 1:引入flxible.js插件 <scrip...
Grid布局--移动端
weilai_a的博客
12-05 900
Grid布局---网格布局 是一种二维布局：水平方向和垂直方向同时存在。 grid布局可以很快的写出这种布局样式，不需要浮动定位套div。无需拆分左右，上下。 概念 容器container:采用网格布局的区域 项目item:容器中采用网格定位的子元素 行row:容器中水平区域 列column:容器中垂直区域 单元格cell: m行 n列 m*n个单元格 网格线gril line:划分网格的线 水平网格线：行 垂直网格线：列 正常...
移动端响应式布局
MartinYP的博客
08-10 1312
个人学习笔记
前端页面布局之【Grid布局】详解
商务合作/软件定制/学习交流
10-07 2410
前端页面布局之【Grid布局】详解
CSS布局：Flex、Grid、移动端适配方案
黄黄黄一边敲代码一边写出来的博客
04-19 1462
1.Flex弹性盒模型 ​ 随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。 ​ 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 作用在flex容器上 作用在flex子项上 flex-direction order flex-wrap flex-grow flex-flow flex-s
CSS布局——grid布局
weixin_44422620的博客
09-07 811
CSS布局——grid布局
前段笔记(一) grid布局在IE中的兼容问题
qq_57728310的博客
08-02 5082
最近在编写项目时遇到了一些兼容性的问题，因为头一次使用grid布局和flex布局进行IE兼容，在初期兼容时遇到了很让人头大的问题，好在最后解决，特意留个笔记. 在IE中，grid布局最多兼容至IE10，且不完全兼容，可用的兼容属性为： 定义grid容器:display:-ms-grid; 定义行数：-ms-grid-columns; 定义列数：-ms-grid-rows; 重复函数：（重复主体）重...
移动端H5固定底部导航菜单的三种布局实现
热门推荐
xiaoxiaohui520134的博客
10-11 4万+
http://www.fly63.com/article/detial/859 需求： 需要把导航固定在底部？只能滑动内容，导航菜单固定不动的。效果如下： 这篇文章主要讲解三种实现方案，包括：fixed,absolute,以及css3的flex布局。 html结构如下： &lt;div class="box"&gt; &lt;div class="roll"&gt;滚动区域...
微信小程序之获取后台动态数据表格布局display:table
Hello，陌生人^o^。遇见你真好...
09-02 1万+
本文没有采用flex布局和grid布局来设置表格的，而是通过 display: table;来设置。一方面工作中经常用到这种自适应表格排版布局方式（包括方框列表及九宫格式），但是flex布局和grid布局来设置的话就很容易了，这次想通过另一种方法来实现，而且这种方法比较少用，所以想尝试一下，分享给大家。 如果对这个属性不熟的可以参考这篇文章，介绍的很详细：css Table布局-display:...
rem 移动端栅格化 适配
weixin_33924312的博客
06-26 354
1.rem rem (font size of the root element)是指相对于根元素<html>字体大小的单位。 <html> <head> <style type="text/css"> html{ font-size: 20px...
grid布局浏览器兼容_使用 CSS Grid：以兼容不支持栅格化布局的浏览器
weixin_39769183的博客
12-19 3201
摘要当使用任何 CSS 的新特性的时候，浏览器的兼容问题都必须去解决。与 Flexbox 和 CSS Grid 一样，在使用 CSS 新特性布局时，兼容性比性能增强更值得考虑。在这篇文章中，我将探索现今处理浏览器兼容问题的方法。为了让我们现在就用上 CSS 的新特性，我们可以做出哪些努力，仍然给那些不支持新特性的浏览器提供很好的体验？我们说的支持是什么？在阐明如何在去支持那些本身不支持网格的浏览器...
Flex 弹性布局、Grid网格布局和多列布局
06-06
Grid 网格布局是一种将网页划分为行和列的布局方式，可以实现复杂的网格布局效果。Grid 布局非常适合于大型网站和应用程序的布局，可以实现高度定制化和复杂性要求较高的布局效果。 多列布局是一种将内容按照列排列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值