css中, grid-auto-rows: 怎样简写在grid:中

grid-auto-rows:100px; grid-template-columns:1fr 1fr;
👆可以写成👇
grid:auto-flow 100px / 1fr 1fr;

在CSS Grid布局中,grid-auto-rows 属性用于指定自动生成的网格容器的行的大小。如果你想要将 grid-auto-rows 的值简写在 grid 属性中,你需要按照 grid 属性的语法结构来进行。

grid 属性是一个简写属性,用于设置以下网格容器的属性(按顺序):

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

然而,要注意的是,grid 属性并不能接受所有这些值的任意组合。它主要是为了简化同时设置 grid-template-rowsgrid-template-columns 的语法。其他属性,如 grid-auto-rows,通常还是需要单独设置。

但是,如果你想要设置 grid-auto-rows 和其他相关属性,你可能需要这样写:

.container {grid-template-rows: repeat(3, auto); /* 或者其他你想要的行高设置 */grid-template-columns: 1fr 1fr 1fr; /* 或者其他你想要的列宽设置 */grid-auto-rows: 100px; /* 设置自动生成的行的高度 */
}

上面的代码中,grid-template-rowsgrid-template-columns 被用来定义网格的行列结构,而 grid-auto-rows 被用来定义当网格容器中的内容超出明确定义的行时所创建的隐式行的高度。

如果你真的想要尽可能使用 grid 属性来简写,并且只关心行和列的大小,你可以这样做:

.container {grid: repeat(3, auto) / 1fr 1fr 1fr;
}

但在这个简写中,你并没有设置 grid-auto-rows。对于 grid-auto-rows 的值,你还是需要单独设置,因为 grid 属性不支持直接包含 grid-auto-rows 的值。所以,对于 grid-auto-rows 的设置,你还是需要使用完整的属性名来指定。

目前(截至我的知识截止日期),CSS Grid规范并没有提供在 grid 属性中直接包含 grid-auto-rowsgrid-auto-columns 的值的方式。因此,这些属性通常需要单独声明。




在CSS Grid布局中,grid-auto-rows 属性用于指定自动生成的网格行的大小。然而,grid 简写属性主要用于设置 grid-template-rowsgrid-template-columns,它并不直接支持简写 grid-auto-rows

grid 属性的语法是这样的:

grid: grid-template-rows / grid-template-columns;

或者,如果还包含了 grid-template-areas

grid: grid-template-areas grid-template-rows / grid-template-columns;

但是,你不能直接在 grid 属性中包含 grid-auto-rows 的值。相反,你需要单独设置 grid-auto-rows 属性。例如:

.container {grid: auto / 1fr 1fr 1fr; /* 这将设置 grid-template-rows 为 auto 和 grid-template-columns 为 1fr 1fr 1fr */grid-auto-rows: 100px; /* 然后单独设置自动生成的行的高度 */
}

在上面的代码中,grid 属性设置了网格的模板行和列的大小,而 grid-auto-rows 则单独设置了当内容超出明确定义的行时所创建的隐式行的高度。

如果你想要同时设置 grid-template-rowsgrid-template-columnsgrid-auto-rows,你需要这样做:

.container {grid-template-rows: repeat(3, auto); /* 设置模板行的高度 */grid-template-columns: 1fr 1fr 1fr; /* 设置模板列的宽度 */grid-auto-rows: 100px; /* 设置自动生成的行的高度 */
}

总结来说,你不能在 grid 简写属性中直接包含 grid-auto-rows 的值。你需要单独设置这个属性来定义自动生成的行的高度。这是由CSS Grid规范的当前设计决定的,它要求某些属性必须单独设置,而不是通过 grid 简写属性来设置。







"grid-auto-rows: 100px ; grid-template-columns: 100px 200px 300px; " 怎样简写在"grid"中

在CSS Grid布局中,你可以使用grid属性来简写多个grid相关的属性。然而,需要注意的是,grid属性是一个复合属性,它允许你设置grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow的值,但它并不总是提供与单独设置这些属性完全相同的灵活性。

对于你给出的具体例子:

grid-auto-rows: 100px;
grid-template-columns: 100px 200px 300px;

你可以尝试使用grid属性来简写,但不幸的是,grid-auto-rows不能与grid-template-columns直接合并在grid属性中,因为grid属性主要用于设置grid-template-*属性,并且它期望行和列的值成对出现。

然而,你可以单独为grid-template-columns使用grid属性的一个简化形式,但这样你就无法同时简写grid-auto-rows了。例如:

grid: auto-flow / 100px 200px 300px;

在这个简写中,auto-flowgrid-auto-flow的值,它控制自动放置算法如何工作,而/ 100px 200px 300px设置了grid-template-columns。但是,这个简写并没有包含grid-auto-rows的值。

因此,目前没有一个直接的方法可以使用grid属性来同时简写grid-auto-rowsgrid-template-columns。你需要继续使用你原来的写法,分别设置这两个属性。在未来,CSS规范可能会扩展grid属性的功能,以允许更多的简写形式,但在撰写本文时(2023年),情况仍然如此。

在CSS Grid布局中,grid属性是一个简写属性,用于设置grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columns以及grid-auto-flow的值。但是,它并不能完全替代所有这些属性,特别是在需要独立控制它们的时候。

对于你想要简写的样式:

grid-auto-rows: 100px;
grid-template-columns: 100px 200px 300px;

你不能直接将这两个属性合并成一个grid属性的值,因为grid属性要求你同时指定行和列的值,而且它主要关注于grid-template-*属性的设置,而不是grid-auto-*属性。

不过,你可以使用grid属性来设置grid-template-columns,但你需要显式地指定行的值,即使它们不是你想要通过grid-auto-rows设置的自动行。例如:

grid: auto / 100px 200px 300px;

在这个例子中,auto关键字用于行的值,它实际上并不设置grid-auto-rows,而是指定了grid-template-rows的默认值为auto,意味着行高将基于内容自动调整。而/ 100px 200px 300px则设置了grid-template-columns

如果你想要同时设置grid-auto-rowsgrid-template-columns,并且希望grid-auto-rows有一个固定的值(如100px),那么你不能通过grid属性来实现这一点,你需要继续分别设置这两个属性,就像你原来做的那样:

grid-auto-rows: 100px;
grid-template-columns: 100px 200px 300px;

目前,CSS规范并没有提供一种方法来在grid属性中同时简写grid-auto-rowsgrid-template-columns。因此,为了保持代码的清晰和可维护性,建议继续分别设置这两个属性。

经试验, 我终于找出了简写的方法:

grid-auto-rows:100px; grid-template-columns:1fr 1fr;
👆可以写成👇
grid:auto-flow 100px / 1fr 1fr;
grid-auto-rows :666px ; grid-template-columns:333px 666px auto 1fr 2fr;
👆可以写成👇
grid : auto-flow 666px / 333px 666px auto 1fr 2fr
grid-auto-rows :100px 80px 60px 40px; grid-template-columns:1fr 1fr 1fr;
👆可以写成👇
grid:auto-flow 100px / 1fr 1fr;
grid-auto-rows :100px 80px 60px 40px; grid-template-columns:1fr 2fr 3fr 100px 200px;
👆可以写成👇
grid : auto-flow 100px 80px 60px 40px / 1fr 2fr 3fr 100px 200px







\

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

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

相关文章

基于CNN-GRU-Attention的时间序列回归预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 CNN(卷积神经网络)部分 4.2 GRU(门控循环单元)部分 4.3 Attention机制部分 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版…

【Vue渗透】Vue站点渗透思路

原文地址 极核GetShell 前言 本文经验适用于前端用Webpack打包的Vue站点,阅读完本文,可以识别出Webpack打包的Vue站点,同时可以发现该Vue站点的路由。 成果而言:可能可以发现未授权访问。 识别Vue 识别出Webpack打包的Vue站…

FFmpeg的HEVC解码器源代码学习笔记-1

一直想写一个HEVC的码流解析工具,看了雷神264码流解析工具,本来想尝试模仿写一个相似的265码流分析工具,但是发现265的解码过程和结构体和264的不太一样,很多结构体并没有完全暴露出来,没有想到很好的方法获得量化参数…

关键字查找,将匹配到的词标红

效果图: 候补 特别说明: 该文有很多新奇的用法,包括载入ui文件、连接信号和控件等等,有很多值得学习的地方 具体实现: 配置文件 #! [0] QT widgets uitoolsHEADERS textfinder.h SOURCES textfinder.cpp main.cpp…

自增a++和自减a--详细解析

1.自增、自减运算符是什么,有什么作用,需要注意什么? 、–;对当前变量值1、-1只能操作变量,不能操作字面量 2.自增、自减运算符放在变量前后有区别吗? 如果单独使用放前放后是没有区别的非单独使用:在变量前,先进行变量自增/…

unity学习(36)——角色选取界面(自制美工)

1.添加一个背景图片,记不住可以查之前的资料(4) 图片拖入asset,属性设成sprite;把图片拖到source image中;colour白色(透明,点一下右边的笔即可);material为…

SpringCloud-Gateway网关的使用

本文介绍如何再 SpringCloud 项目中引入 Gateway 网关并完成网关服务的调用。Gateway 网关是一个在微服务架构中起到入口和路由控制的关键组件。它负责处理客户端请求,进行路由决策,并将请求转发到相应的微服务。Gateway 网关还可以实现负载均衡、安全认…

【零基础学习CAPL】——诊断报文发送

🙋‍♂️【零基础学习CAPL】系列💁‍♂️点击跳转 文章目录 1.概述2.调用CDD的诊断报文发送3.脱离CDD进行诊断报文4.多帧诊断报文的发送4.1.直接定义报文发送4.2调用osek_tp.dll进行多帧数据发送4.3.函数介绍4.4.CAPL脚本实现1.概述 本章主要介绍基于CAPL脚本对诊断报文的…

subprocess.check_output()和subprocess.run()的区别

subprocess.check_output() 返回值:subprocess.check_output() 返回命令的标准输出(stdout)。如果命令执行失败(返回非零退出码),则抛出 CalledProcessError 异常。使用场景:只关心命令的输出&…

vue大文件读取部分内容,避免重复加载大文件,造成流量浪费

使用场景:项目点云地图是pcd文件,但是文件可能上百兆,我需要获取到文件中的版本信息,跟本地的缓存文件做比较,如果不一致,才会加载整个文件。从而节省流量。 避免重复加载整个“.pcd文件,以最大…

【PX4学习笔记】04.QGC地面站的使用

目录 文章目录 目录PX4代码烧入PX4固件代码的烧入方式1PX4固件代码的烧入方式2 QGC地面站的基础使用连接地面站的方式查看关键的硬件信息 QGC地面站的Application Settings模块Application Settings模块-常规界面单位其他设置数据持久化飞机中的数传日志飞行视图计划视图自动连…

观察者模式, 发布-订阅模式, 监听器模式

观察者模式, 发布-订阅模式, 监听器模式 观察者模式 观察者模式是一种行为型设计模式, 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新 角色模型和结构图 在观察者模式中,只有两种…

HarmonyOS Stage模型基本概念讲解

本文 我们来说harmonyos中的一种应用模型 Stage模型 官方提供了两种模型 一种是早期的 FA模型 另一种就是就是 harmonyos 3.1才开始的新增的一种模型 Stage模型 目前来讲 Stage 会成为现在乃至将来 长期推进的一种模型 也就是 无论是 现在的harmonyos 4.0 乃至 之后要发布的 …

IP地理位置查询定位:技术原理与实际应用

在互联网时代,IP地址是连接世界的桥梁,而了解IP地址的地理位置对于网络管理、个性化服务以及安全监控都至关重要。IP数据云将深入探讨IP地理位置查询定位的技术原理、实际应用场景以及相关的隐私保护问题,旨在为读者提供全面了解和应用该技术…

印刷机械故障诊断:虹科MSR165助力Müller Martini AG成功案例

在为杂志装订机开发新产品的过程中,作为印刷后处理机械领域的全球领导者,Mller Martini AG公司发现了传感器故障的问题。通过使用虹科MSR 微型加速度数据记录仪,成功地确定了故障的原因。 新杂志装订机中的三刀修整装置的故障部件是边缘传感器…

BOSS直聘招聘经验

招聘低端兼职岗位。流量很大,来的人通常实力也不足。 招聘高端兼职岗位。流量不多。来的人通常具备一定实力。 招聘高薪职位,流量一般,会有有实力的勾搭。 招聘低薪职位,流量一般。通常没什么实力。

使用 Optimum Intel 在英特尔至强上加速 StarCoder: Q8/Q4 及投机解码

引言 近来,随着 BigCode 的 StarCoder 以及 Meta AI 的 Code Llama 等诸多先进模型的发布,代码生成模型变得炙手可热。同时,业界也涌现出了大量的致力于优化大语言模型 (LLM) 的运行速度及易用性的工作。我们很高兴能够分享我们在英特尔至强 …

测试多线程架构的问题

在测试多线程架构时,需要考虑多个方面以确保系统的稳定性和性能。以下是一些关键问题,需要在测试过程中特别关注: 线程同步 多线程环境中,线程同步是非常重要的问题。由于多个线程可能同时访问共享资源,因此需要使用…

Linux环境下查看磁盘层级占用空间的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Unity3D xLua开发环境搭建详解

前言 xLua是一种基于Lua语言的开发框架,可以帮助开发者在Unity3D中使用Lua脚本来开发游戏。 对惹,这里有一个游戏开发交流小组,希望大家可以点击进来一起交流一下开发经验呀! 在本文中,我们将详细介绍如何搭建Unity…