【css】网格布局重要的6个属性

devtools/2024/9/24 8:03:17/

代码展示:

css">/* 独占一行布局 */grid-template-columns: 1fr;/* 一行两个布局 */grid-template-columns: 1fr 1fr;/* 自由布局 */grid-template-columns: 1fr 200px 1fr;/* 重复布局 */grid-template-columns: repeat(5, 1fr);/* 响应式布局 */grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));/* 跨列跨行布局(这里应用于子元素) */grid-row: 1/3;grid-column: 1/3;

代码解释:

展示了多种使用CSS Grid Layout进行布局的方法,但请注意,grid-row 和 grid-column 属性应该被放置在具体的子元素上,而不是.boxes类本身,因为.boxes类通常被用来定义网格容器的样式,而grid-rowgrid-column用于控制网格项(grid items)跨越的行和列。此外,你的注释与CSS属性直接混合在一起的方式在CSS文件中是不正确的;通常,你会为每个布局需求编写不同的CSS规则或类。

下面是针对你提到的6种基本且重要的网格布局样式的正确应用方式:

1. 独占一行布局

 
css.boxes-single-row {
display: grid;
grid-template-columns: 1fr;
}<

http://www.ppmy.cn/devtools/91850.html

相关文章

C语言典型例题31

《C程序设计教程&#xff08;第四版&#xff09;——谭浩强》 习题2.8 请编写程序将China译为密码&#xff0c;密码的规律是&#xff1a;用原来字母后面的第4个字母代替原来的字母。 例如:C后面的4个字母是G&#xff0c;h后面第4个字母为l 代码&#xff1a; //《C程序设计教程…

springcloud loadbalancer nacos无损发布

前言 故事背景 jenkins部署时总是会有几秒钟接口调用报错&#xff0c;观察日志是因为流量被下发到已下线的服务&#xff0c;重启脚本在停止应用之前先调用nacos注销实例api后再重启依然会短暂出现此问题。项目架构是springcloud alibaba,通过openfeign进行微服务之间调用&…

软件测试面试题最新整理

1. 自动化测试如何处理验证码&#xff1f; 方法一&#xff1a;找开发去掉验证码或者使用万能验证码 方法二&#xff1a;使用OCR自动识别 方法三&#xff1a;记录cookie&#xff0c;通过向浏览器中添加cookie&#xff0c;可以绕过登录的验证码 2. 说一下接口测试的流程&…

关于Redis的面试题(一)

一、为什么要使用Redis 内存数据库&#xff0c;速度很快工作单线程worker&#xff0c;串行化&#xff0c;原子操作&#xff0c;IO线程是多线程的。避免上下文切换使用 IO模型&#xff0c;天生支撑高并发kv模型&#xff0c;v具有类型结构具有本地方法&#xff0c;计算数据移动二…

FFmpeg源码:av_init_packet、get_packet_defaults、av_packet_alloc函数分析

一、av_init_packet函数 av_init_packet函数定义在FFmpeg源码&#xff08;本文演示用的FFmpeg源码版本为7.0.1&#xff09;的源文件libavcodec/avpacket.c中&#xff1a; /*** Initialize optional fields of a packet with default values.** Note, this does not touch the…

Python实现深度森林(Deep Forest)分类模型(deepforest分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 随着大数据时代的到来&#xff0c;机器学习技术在各个领域的应用变得越来越广泛。在许多实际问题中&am…

Java养老护理帮忙代办陪诊陪护小程序系统源码

&#x1f338;【贴心守护&#xff0c;养老新选择】养老护理、代办陪诊、陪护小程序全攻略&#x1f469;‍⚕️&#x1f468;‍&#x1f469;‍&#x1f467;‍&#x1f466; &#x1f308; 引言&#xff1a;科技温暖夕阳红 在这个快节奏的时代&#xff0c;如何让家中长辈享受…

解决Pytest UnknownMarkWarning: Unknown pytest.mark.single - is this a typo?

解决 Pytest UnknownMarkWarning: Unknown pytest.mark.single - is this a typo? 出现截图所示问题 前提&#xff1a; 1.项目中使用了mark标记&#xff1a; pytest.mark.single2.同时项目中包含pytest.ini文件并进行了pytest.ini配置 运行项目 运行时报出截图所示Warning …