低版本的安卓机上是不生效的

  • 代码
.grid_4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
text-align: center;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
  • 正常的效果
1 2 3 4
5 6 7 8
  • 低版本安卓机上的效果
1
2
……
  • 解决方法:使用flex布局模拟出grid的效果

    • 代码
    .grid_4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    }
    .grid_4 .manager_item {
    width: calc(calc(100% / 4) - 15px);
    margin: 0 15px 15px 0;
    text-align: center;
    }
    <!--这个是为了删除是4的倍数的右magin-->
    .grid_4 .manager_item:nth-of-type(4n){
    margin-right: 0;
    }

grid 布局兼容性问题的更多相关文章

  1. CSS Grid布局入门

    相信大家都比较熟悉flex布局了,最近有空研究了波grid布局,感觉虽然兼容性还不是太高,应用不是太普遍,但是功能非常强大.未来应该是grid+flex为主流,grid是二维布局,很灵活,适合整体构架 ...

  2. 学懂grid布局:这篇就够了(译)

    上周发过一篇关于flex布局的文章,但发完之后我感觉我并没有写很多自己对flex布局的理解,因为原链接的作者的轮子实在是太强了,这里借用知乎大佬牛岱的话来说,当人家已经有足够好的轮子,你就不要试图,甚 ...

  3. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

  4. 理解css中Grid布局,在项目中如何实现grid页面布局

    简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的 ...

  5. 轻轻松松学CSS:Grid布局

    网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...

  6. WPF中Grid布局

    WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...

  7. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  8. wpf后置代码中的Grid布局以及图片路径的设置

    之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...

  9. css grid布局的首次使用

    首先来看一下效果图 接下来废话不多说,先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  10. 学习ExtJS的grid布局

    这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...

随机推荐

  1. BGE M3-Embedding 模型介绍

    BGE M3-Embedding来自BAAI和中国科学技术大学,是BAAI开源的模型.相关论文在https://arxiv.org/abs/2402.03216,论文提出了一种新的embedding模 ...

  2. 我是如何搭建ChatGPT并嵌入到微信公众号的?

    前言 体验方式:薇辛搜索 龚众号 [程序员Jason],关注并点击发消息,点菜单ChatGPT 然后翻到最下面点[阅读原文]就可以了. ChatGPT对某些国家是不提供服务的,所以一般是用不了,除非是 ...

  3. kubernetes集群最新版安装

    原文地址:https://haiyux.cc/2022/09/21/k8s-install/ 虚拟机准备 我这里准备了三台虚拟机,分别部署一个master和两个node,操作系统位ubuntu 20. ...

  4. axiso封装

    import axios from 'axios';import {Message } from 'element-ui'//element-ui提示框组件import config from './ ...

  5. C# 从控制台创建 WinUI 3 应用

    本文将告诉大家如何从控制台而不是 WinUI3 模版项目,从零一步步创建出 WinUI 3 应用 本文不是 WinUI 3 入门博客,本文将从比较基础层的方式创建出 WinUI 3 应用,适合于了解 ...

  6. 使用 WPF 做个 PowerPoint 系列 文本 BodyProperties 的 FontScale 与文本字号缩放

    本文来告诉大家,在 OpenXML 的 BodyProperties 的 NormalAutoFit 的 FontScale 属性缩放文本框的文本字号的方法 通过 ECMA 376 文档可以了解到 B ...

  7. 51k+ Star!动画图解、一键运行的数据结构与算法教程!

    大家好,我是 Java陈序员. 我们都知道,<数据结构与算法> -- 是程序员的必修课. 无论是使用什么编程语音,亦或者是前后端开发,都需要修好<数据结构与算法>这门课! 在各 ...

  8. 【GUI软件】抖音搜索结果批量采集,支持多个关键词、排序方式、发布时间筛选等!

    目录 一.背景介绍 1.1 爬取目标 1.2 演示视频 1.3 软件说明 二.代码讲解 2.1 爬虫采集模块 2.2 软件界面模块 2.3 日志模块 三.获取源码及软件 一.背景介绍 1.1 爬取目标 ...

  9. 【简说Python WEB】Form提交表单

    目录 [简说Python WEB]Form提交表单 安装flask-wtf 代码树 app.py源码中表单类: index.html的源码修改:渲染form表单 app.py源码中from表单处理 会 ...

  10. 🔥🔥🔥httpsok-v1.8.0 SSL证书自动续签就应该这么简单

    httpsok-v1.8.0 SSL证书自动续签就应该这么简单 简介 一行命令,一分钟轻松搞定SSL证书自动续期 httpsok 是一个便捷的 HTTPS 证书自动续签工具,专为 Nginx 服务器设 ...