程序员经验分享-hwhale

css3网格布局

2023-11-06

网格布局是flex的升级版

父级属性display: grid;即可把这个div变成网格；

父级属性grid-template-columns: 20% 20% 20% 20%;设置有多少列，每列有多宽。auto自动填；1fr 2fr 设置比例倍数；

父级属性grid-template-rows: 200px 200px 100px 300px;设置每行有多高。auto自动填充；

父级属性grid-gap: 10px 20px ;设置上下左右外边距；

父级属性：内容区域：align-items（垂直）、justify-items（水平）整体区域：align-content、justify-content；

grid-auto-flow: row dense;先行后列，尽可能填充紧密。

 

子属性grid-column-start：左边框所在的垂直网格线 ；上下左右线构成一个区域，以线为划分哦。

子属性grid-column-end：右边框所在的垂直网格线

子属性grid-row-start：上边框所在的水平网格线

子属性grid-row-end：下边框所在的水平网格线

子属性grid-row-start: span 3;列开始长度为3

子属性grid-column-start: span 2;行开始长度为2

 

简单来说，我们通过设置grid创建一个网格。规定好行列，再设计小方块占据宽高有多大，随意搭配，完成想要的样式。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css3网格布局 的相关文章

  • OPENCV4学习代码-Mat类构造与赋值

    代码清单2 4 默认构造函数使用方式 cv Mat Mat 代码清单2 5 利用矩阵尺寸和类型参数构造Mat类 cv Mat Mat int rows int cols int type 代码清单2 6 用Size 结构构造Mat类 cv

  • 华为机考笔记之字符串以水仙花规则拆分

    题目 一 输入一组字符串 求字符串分组后 每组的和为水仙花数 注 水仙花数是一个三位数 其个位 十位 百位的立次方 的和等于自身 如 371 3 3 7 3 1 1 1 如果无法找到该分组 返回0 2 找到该分组 切分组不唯一 返回 1 3

  • js 每隔 10 秒钟 运行一次，发送一个 ajax 请求

    每隔 10 秒钟 运行一次 发送一个 ajax 请求 function runEvery10Sec 1000 10 10 秒钟 setTimeout runEvery10Sec 1000 10 ajax dataType json type

  • jQuery取得select选中的值

    jQuery取得select选中的值 本来以为jQuery select1 val 是取得选中的值 那么jQuery select1 text 就是取得的文本 这是不正确的 正确做法是 jQuery select1 option selec

  • Qt中的单例模式：实现一个单例的界面类

    文章目录 前言 一 什么是单例模式 二 单例模式的优缺点及使用场景 三 Qt中单例类的创建 四 单例类的使用 测试 总结 前言 本文主要讲述了使用加锁的懒汉式来实现单例 文中示例将一个界面类修改为单例类 并在主界面获取多次该类的实例来进行测

  • 统计一个字符串中大写字母字符，小写字母字符，数字字符出现的次数

    统计一个字符串中大写字母字符 小写字母字符 数字字符出现的次数 不考虑其他字符 1 需求 统计一个字符串中大写字母字符 小写字母字符 数字字符出现的次数 不考虑其他字符 举例 Hello123World 结果 大写字符 2个 小写字符 8个

  • IDEA中常用的插件

    目录 Free MyBatis plugin codehelper generator grep console Translation Alibaba Java Coding Guidelines CamelCase GenerateAl

  • unordered_map的哈希HASH重载——举例unordered_map与pair联合使用

    有些时候 为了图省力 我们没准会这样的调用一个函数 unordered map lt pair

  • 分子模拟—Ovito渲染案例教程

    heartsuit spadesuit 分子模拟 Ovito渲染案例教程 heartsuit

  • 利用Nodejs 构建 WEB服务器

    前言 Web 服务器一般指网站服务器 是指驻留于因特网上某种类型计算机的程序 可以 向浏览器等 Web 客户端提供文档 也可以放置网站文件 让全世界浏览 可以放置数据文件 让全世界下载 目前最主流的三个 Web 服务器是 Apache Ng

  • 运算放大器芯片输出扩流电路三例

    工作原理 图1所示为三种集成运算放大器输出电流扩展电路 图 a 为双极性扩展电路 图 b 图 c 为单极性扩展电路 在图1 a 所示电路中 当输出电压为正时 BG1管工作 BG2管截止 输出电压为负时 BG1管截止 BC2管工作 二极管D1

  • C、C++、C#、python、java编程—文件读取

    C资料 菜鸟教程 C语言中文网 C community C 资料 菜鸟教程 cplusplus C community C 资料 菜鸟教程 microsoftC 文档 python资料 菜鸟教程 python标准库 Java资料 菜鸟教程

  • Multisim14.0安装教程

    2 安装步骤 解压 打开 Multisim14 0 鼠标右击 NI Circuit Design Suite 14 0 exe 选择 以管理员身份运行 点击确定 选择文件的解压路径 最好不解压在C盘 安装完成删掉即可 然后点击 Unzip

  • 华为OD机试2023(JS,C++,JAVA,PYTHON)-服务器能耗统计

    本篇题解 服务器耗能 题目描述 服务器有三种运行状态 空载 单任务 多任务 每个 时间片 的能耗的分别为 1 1 1 3 3 3 4 4 4 每个任务由起始时间片和结束时间片定义运行时间 如果一个时间片只有一个任务需要执行 则服务器处于单任

  • 微信小程序的常见的面试题（总结）

    1 微信小程序有几个文件 WXML WeiXin Markup Language 是框架设计的一套标签语言 结合基础组件 事件系统 可以构建出页面的结构 内部主要是微信自己定义的一套组件 WXSS WeiXin Style Sheets 是

  • Qt实现IP输入框（模仿Windows系统中的IP输入框）

    本文章所用的代码整理自Qt实现IP输入框 qt中ip地址输入框 GreenArrowMan的博客 CSDN博客 感谢原作者分享 本代码在上述作者代码基础上做了如下修改 1 屏蔽中文输入法 2 修复原作者代码中输入框四周的黑色边线无法正常显示

  • 【安装问题】python安装weditor出现报错总结

    python安装weditor出现报错总结 问题描述 主要原因是公司使用的python2版本过老 由于不能随意升级python版本 只能在python2的基础上解决办法 有很多地方需要更新 总结命令如下 基本上试过一遍 问题就可以解决了 解

  • 深度学习源码小项目汇总-代码全

    demo仓库和视频演示 到此一游7758258的个人空间 哔哩哔哩 bilibili 卷积网路CNN分类的模型一般使用包括alexnet DenseNet DLA GoogleNet Mobilenet ResNet ResNeXt Shu

  • 财报解读：毛利持续改善，金山云正在“弯道超车”？

    一季度 云巨头们的表现持续稳健 依旧稳坐前排 而作为中小云代表的金山云也在5月23日发布了2023年一季度财报 盈利能力持续改善成为通篇最亮眼的一笔 随着AI大模型打开了新的 潘多拉魔盒 云市场也在发生着巨变 但AI能否成为云厂商打开盈利大

  • JavaScript实现经典消方块游戏

    操作方式 在游戏区域中任意位置滑动手势 点击屏幕下方的按钮 键盘WASD和 都可以操作 游戏动作 操作 方块向左移动 左划 按下蓝色键 左一 A 方块向右移动 右划 按下橙色键 右一 D 强制方块下落 下划 按下粉色键 左二 S 改变方块方

随机推荐

  • Learncpp___CH1

    You have to write a program once to know how you should have written it the first time Short answer You don t C is one p

  • HTML详解连载（3）

    HTML详解连载 3 专栏链接 link http t csdn cn xF0H3 下面进行专栏介绍 开始喽 表单 作用 使用场景 input标签基本使用 示例 type属性值以及说明 input标签占位文本 示例 注意 单选框 radio

  • 报错django.db.utils.DataError: (1406, "Data too long for column 'gender' at row 1")的解决办法

    参考解决方案 Traceback most recent call last File C Users rHotD AppData Local Programs Python Python35 lib site packages djang

  • 【华为机试真题 JAVA】非严格递增连续数字序列-100

    编程题目 100分 非严格递增连续数字序列 2022 Q1 Q2 考试题 时间限制 C C 1秒 其他语言 2秒 空间限制 C C 262144K 其他语言524288K 64bit IO Format lld 本题可使用本地IDE编码 不

  • react+antd mobile实现 H5底部tab页面

    1 引入底部tab页所需组件 第二步 创建tabs负责放入底部的页面路由 第三步在return里面对tab进行配置以及引用所需的页面组件内 其中 activekey 是切换tab的key值当他切换等于对应的路由是就展示对应的页面

  • 【Java】将文本转化成语音

    1 需要的jar包 2 把dll文件放在 JAVA HOME bin下 注意系统是32位还是64位 也可以放在C Windows System32下 如果是64位应该放在C Windows SysWOW64 下 3 java代码 impor

  • CA2W格式化多个时需要加强制转换，CDuiString格式化也需强转

    CString str str Format L s CM2W ss data str Format L s s LPCTSTR CM2W ss data LPCTSTR CM2W asdfg str Format L s LPCTSTR

  • 基于Zynq FPGA对雷龙SD NAND的测试

    文章目录 一 SD NAND特征 1 1 SD卡简介 1 2 SD卡Block图 二 SD卡样片 三 Zynq测试平台搭建 3 1 测试流程 3 2 SOC搭建 四 软件搭建 五 测试结果 六 总结 一 SD NAND特征 1 1 SD卡简

  • webpack5学习进阶：多页面应用、Tree Shaking、PWA、Shimming

    文章目录 一 多页面应用 1 entry 配置 1 1 将两个本地文件打包在一起 1 2 还可以打包第三方库文件 1 3 多页面打包 2 index html 模板配置 3 多页面环境搭建 二 Tree Shaking 摇树优化 1 配置

  • rocketMQ系列(一): 消息中间件及rocketMQ简介

    一 消息中间件介绍 消息中间件是基于队列与消息传递技术 在网络环境中为应用系统提供同步或异步 可靠的消息传输的支撑性软件系统 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流 并基于数据通信来进行分布式系统的集成 通过提供消息传递

  • 什么是弱网测试?为什么要进行弱网测试?怎么进行弱网测试？

    什么是弱网测试 由于处在移动互联网盛行的时代 网络形态除了有线连接外 还有2G 3G 4G Wifi 5G等多种手机网络连接方式 首先额外补充一些5G的知识 2分钟了解什么是5G 在前不久结束的 MWC 2018 上 5G 成了全球的一个热

  • caffe-python lmdb 读写（转）

    lmdb write import lmdb import numpy as np import cv2 import caffe from caffe proto import caffe pb2 basic setting 这个设置用来

  • ORA-01186/ORA-01122/ORA-01110/ORA-01206

    author skate time 2011 12 14 在前几天检查一套DG库的时候 当read only打开stanby库的时候 在alert log里发现错误log如下 Wed Dec 14 15 45 19 2011 Complet

  • vb excel编程实例_有VB的基础，如何学习VBA

    VBA的全称Visual Basic for Applications 在Office等许多软件中 看到的宏 便是VBA 基于我的理解 VB基础指什么 这里的VB基础指能够看得懂简单的VB代码 对if结构 for结构有一定的认识 理解变量有

  • 【华为OD统一考试B卷

    在线OJ 已购买本专栏用户 请私信博主开通账号 在线刷题 运行出现 Runtime Error 0Aborted 请忽略 华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一

  • Spring Data 查询方法的规则定义（五）

    有句话这样说 欲练神功 挥刀自宫 请亲们先回到第一个 从Spring data 介绍 开始看 搭好环境 跟着步伐一块走 Spring Data 的方法必须严格按照它的规范进行编写 如果写错了就不行 下面是网上找的一张图 仔细看 咱们先拿几个

  • Mutimap用法

    Multimap 1 创建 Multimap

  • 牛客网&&华为机试&&坐标移动

    牛客网 华为机试 坐标移动 代码实现 include

  • 分库分表实战之从根上带你吃透MySQL的索引

    V xin ruyuanhadeng获得600 页原创精品文章汇总PDF 问题分析 为什么查询变慢呢 接上期 我们知道了MySQL查询的全过程 也知道了整个过程的瓶颈在于磁盘IO 那怎么降低磁盘IO次数呢 答案就是索引 正确的使用索引 我们

  • css3网格布局

    网格布局是flex的升级版 父级属性display grid 即可把这个div变成网格 父级属性grid template columns 20 20 20 20 设置有多少列 每列有多宽 auto自动填 1fr 2fr 设置比例倍数 父级

热门标签