CSS - grid制作表格

1. grid-template-columns:网格布局中的列的数量,也可以设置列的宽度

.grid-container {display: grid;grid-template-columns: 80px 200px auto 40px;
}.grid-container {display: grid;grid-template-columns: auto auto auto auto;//表示所有列的宽度第一样
} .grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr;//一个 fr 单位代表网格容器中可用空间的一等份//这里创建三个相等宽度的轨道,这些轨道会随着可用空间增长和收缩
}

2. grid-template-rows:每一行的高度

.grid-container {display: grid;grid-template-rows: 80px 200px;
}

3. justify-content:用于对齐容器内的网格(和display:flex里面的属性一样)

4. align-content:用于设置垂直方向上的网格元素在容器中的对齐方式(和display:flex里面的属性一样)

5. grid-column-gap:列之间的网格间距

6. grid-row-gap:行之间的网格间距

7. grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写

8.  grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性可以设置网格线

//从第一列开始,第三列结束
.item1 {grid-column-start: 1;grid-column-end: 3;
}
//从第一行开始,第三行结束
.item1 {grid-row-start: 1;grid-row-end: 3;
}

 9. grid-column : 定义了网格元素列的开始和结束位置(是 grid-column-start 和 grid-column-end 属性的简写属性)

//设置 "item1" 在第 1 列开始,在第 5 列前结束
.item1 {grid-column: 1 / 5;
}//设置 "item1" 跨越 3 列
.item1 {grid-column: 1 / span 3;
}//设置 "item2" 跨越 3 列
.item2 {grid-column: 2 / span 3;
}

10. grid-row : 定义了网格元素行的开始和结束位置

11. grid-area: 是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写

//设置 "item8" 从第 1 行开始和第 2 列开始, 第 5 行和第 6 列结束
.item8 {grid-area: 1 / 2 / 5 / 6;
}//设置 "item8" 从第 2 行开始和第 1 列开始, 横跨 2 行 3 列
.item8 {grid-area: 2 / 1 / span 2 / span 3;
}

CSS 网格布局
CSS 网格容器
CSS 网格元素 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/57497.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Starrocks部署前期准备

前提条件 硬件要求 CPU StarRocks 依靠 AVX2 指令集充分发挥其矢量化能力。因此,在生产环境中,强烈建议您将 StarRocks 部署于 x86 架构 CPU 的服务器上。 您可以在终端中运行以下命令来检查 CPU 是否支持 AVX2 指令集: cat /proc/cpuin…

高效评优:基于SpringBoot的学生奖励管理系统

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及,互联网成为人们查找信息的重要场所,二十一世纪是信息的时代,所以信息的管理显得特别重要。因此,使用计算机来管理学生评奖评优管理系统的相关信息成为必然。…

全连接前馈网络:深度学习的基础架构解析

全连接前馈网络:深度学习的基础架构解析 全连接前馈网络,也称为多层感知机(MLP, Multi-Layer Perceptron),是深度学习中最基础的神经网络结构之一。这种网络由多个层次的神经元组成,每一层都完全连接到前一…

[JAVAEE] 线程安全问题

目录 一. 什么是线程安全 二. 线程安全问题产生的原因 三. 线程安全问题的解决 3.1 解决修改操作不是原子性的问题 > 加锁 a. 什么是锁 b. 没有加锁时 c. 加锁时 d. 死锁 e. 避免死锁 3.2 解决内存可见性的问题 > volatile关键字 (易变的, 善变的) a. 不加…

古埃及象形文字在线字典

我在个人网站“小孔的埃及学站点”上推出了在线的象形文字字典,总共收罗了将近700条的象形文字(词)。在线字典的使用方法很简单,在网站各大版块首页的右上方会有如下图所示的查询入口。 点击文本框,输入中文或英文关键…

深入理解 SQL 中的高级数据处理特性:约束、索引和触发器

在 SQL(Structured Query Language)中,除了基本的查询、插入、更新和删除操作外,还有一些高级的数据处理特性,它们对于确保数据的完整性、提高查询性能以及实现自动化的数据处理起着至关重要的作用。这些特性包括约束、…

百度文心一言接入流程-java版

百度文心一言接入流程-java版 一、准备工作二、API接口调用-java三、百度Prompt工程参考资料: 百度文心一言:https://yiyan.baidu.com/百度千帆大模型:https://qianfan.cloud.baidu.com/百度千帆大模型文档:https://cloud.baidu.com/doc/WENXINWORKSHOP/index.html千tokens…

使用API有效率地管理Dynadot域名,通过域名命令删除域名服务器(NS)

前言 Dynadot是通过ICANN认证的域名注册商,自2002年成立以来,服务于全球108个国家和地区的客户,为数以万计的客户提供简洁,优惠,安全的域名注册以及管理服务。 Dynadot平台操作教程索引(包括域名邮箱&…

<Project-11 Calculator> 计算器 0.4 公制单位转换器 Metric Units Converter HTML JS

前言 这个参考的是时间转换器 <Project-11 Calculator> 计算器 0.1时间换算器 Time Conversion Calculator-CSDN博客,主要就是替换内容,相当于找不同。 改新内容 index.html 加了新页面链接 添加了 favicon.jpg 橘猫 就当是…

asp.net core会话session设置滑动过期时间

微软asp.net core帮助文档 asp.net core会话 https://learn.microsoft.com/zh-cn/aspnet/core/fundamentals/app-state?viewaspnetcore-8.0 Program.cs 文件中,核心代码: builder.Services.AddSession(options > { //滑动过期时间,空闲…

Qt开发-----线程调度

目录 前言 一、Linux下查看进程的情况 二、线程的创建 三、多线程的创建和使用 前言 以下引用内容源自正点原子Qt开发指南文档。 我们写的一个应用程序,应用程序跑起来后一般情况下只有一个线程,但是可能也有特殊情况。比如我们前面章节写的例程都跑…

让你的单细胞数据动起来!|iCellR(一)

今天在翻阅single cell 的github时候,我看见了这个R包,允许我们处理各种来自单细胞测序技术的数据,如scRNA-seq,scVDJ-seq和CITE-Seq。 单细胞转录组教程汇总 想看整套的学习流程还可以戳这里: https://vimeo.com/3…

CSS综合案例——新闻详情

一、知识点 1、文字颜色 属性名:color 属性值: 颜色表示方式属性值说明使用场景颜色关键字颜色英文单词red,green,blue学习测试rgb表示法rg(r,g,b)r,g,b表示红绿蓝三原色,取值0-255了解rgba表示法rgba(r,g,b,a)a表示透明度,取…

C#WPF的App.xaml启动第一个窗体的3种方式

WPF的App.xaml启动第一个窗体的3种方式 1.使用App.xaml的StartupUri属性启动&#xff08;推荐使用&#xff09; 在App.xaml文件中&#xff0c;你可以设置StartupUri属性来指定启动时显示的第一个窗口&#xff1a; <Application x:Class"浅看一眼WPF.App"xmlns&…

sed工具的基本使用

文章目录 sed工具介绍什么是sed工具&#xff0c;有什么用sed命令执行流程sed是按行读取文件的每当读取一行内容&#xff0c;都会进行一次判断&#xff0c;判断是否是想要的行默认不实质改变文件内容&#xff0c;仅临时输出给用户看&#xff08;除非加-i选项&#xff09;例1 例2…

1024 程序员节:代码铸就的科技传奇,节日快乐

一、1024 程序员节的起源与发展 国际程序员节起源于俄罗斯&#xff0c;其设立的日期是每年的第 256 天&#xff0c;平年为 9 月 13 日&#xff0c;闰年为 9 月 12 日。256 这个数字对程序员来说意义非凡&#xff0c;1 个字节等于 8 位元&#xff0c;最多能表示 256 个数值&…

[LeetCode] 230. 二叉搜索树中第K小的元素

题目描述&#xff1a; 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 小的元素&#xff08;从 1 开始计数&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,1,4,null,2], k 1 输出&#xff1a;1示例 2&am…

河源市社保卡照片要求及手机自拍拿数码相片回执的方法

河源市的居民在申请或更新社保卡时&#xff0c;需要提交一张符合特定要求的照片。如果您需要更新或申请社保卡&#xff0c;本文将为您详细介绍河源市社保卡照片的规格要求&#xff0c;并指导您如何通过手机自拍获取符合标准的社保卡照片及回执。 根据河源市社保局的指南&#x…

jconsole或者jvisual连接服务器Java进程

java -Djava.rmi.server.hostname你的ip-Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.port一个新的端口&#xff0c;不能和项目端口一样-Dcom.sun.management.jmxremote.sslfalse -Dcom.sun.management.jmxremote.authenticatefalse -Dcom.sun.management.j…

深度解读:Spring.3版本自动装配机制的演变与实践

前言 今天&#xff0c;我们将开启对Spring-AI系列源码的讲解。请大家不急不躁&#xff0c;我会逐步深入&#xff0c;每次专注于一个知识点&#xff0c;以防让人感到困惑。 首先&#xff0c;源码的讨论自然离不开自动装配。有人可能会问&#xff0c;之前已经讲解过这个内容了&…