CSS Grid 网格布局简要说明

grid网格布局,是一个二维系统,可以像表格一样将页面容器分割成一块一块的区域,定义子元素的排布和位置。

简单使用: 对父元素设置dispay:grid;grid-template-colums和grid-template-rows来设置几行几列

1. grid-template-columns/grid-template-rows属性

使用以空格分隔来定义网格的行和列,它们之间的空格表示网格线

.container{display:grid;grid-template-columns:  50px auto 50px ;grid-template-rows: 25% 100px auto;
}

上面代码设置的是一个三行三列的网格,具体行高和列宽即为设置的值

2 fr属性

fr单元等分网格容器剩余可用空间来设置网络的大小


.container{grid-complate-columns: 1fr 1fr 1fr;
}

上面代码将每个网格项设置为网格容器宽度的三分之一:

3 grid-template-areas属性

grid-area属性可以定义网络模板,通过引用grid-area属性指定的网格区域的名称来定义网络模板,重复网格区域的名称会使内容扩展到这些单元格。

grid-area-name:由网格项grid-area指定网格区域的名称

.:代表空网格单元

none:不定义网格区域

.area-a{grid-area: head;
}
.area-b{grid-area: body;
}
.area-c {grid-area: sidebar;
}
.area-d {grid-area: foot;
}
.container{grid-template-columns: 50px 50px 50px 50px;grid-template-rows: auto;grid-template-areas:"head head head head""body body . sidebar""foot foot foot foot";
}

上面代码创建如下网格:


| head | head | head | head |


| body | empty----grid | side |


| foot | foot | foot | foot |


4 grid-template属性

grid-template-columns、grid-template-rows、grid-template-areas的简写

与flex区别

  1. flex是一维布局,适合做局部布局,比如导航栏组件。
  2. grid是二维布局,通常用于整个页面的规划。
  3. grid适合框架布局,flex适合细节布局

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

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

相关文章

CMakeLists.txt

源码结构 生成可执行程序 # CMake最小版本号 cmake_minimum_required(VERSION 3.15.0)#增加-stdc11 set(CMAKE_CXX_STANDARD 11)#设置工程名称 project(calculate)#[[ #方法一&#xff1a;添加源码文件 #aux_source_directory(< dir > < variable >) #dir&#xf…

c# 比较对象是否相同

在C#中&#xff0c;比较两个对象是否相同可以有以下几种方法&#xff1a; ReferenceEquals(object o1, object o2)&#xff1a; 这是一个静态方法&#xff0c;用于比较两个对象的引用是否指向堆中的同一块内存。如果两个对象是同一个实例或者都是 null&#xff0c;那么返回 tru…

python异常之assert语句

1 python异常之assert语句 python的assert语句&#xff0c;是一个断言语句。 用于断言某个表达式的值是否符合预期&#xff0c;不符合则停止运行&#xff0c;并且触发AssertionError异常。 1.1 基本用法 用法 assert test_cond [,err_msg]描述 test_cond&#xff1a;要测…

FreeSWITCH continue_on_fail

先看一段简单的dialplan&#xff1a; <action application"set" data"continue_on_failtrue"/> <action application"bridge" data"user/1001"/> <action application"log" data"ERR run here"/&g…

【JDK新特性】JDK和Springboot各版本新特性介绍

目录 参考资料 以下是一些较新版本的JDK的主要新特性介绍&#xff1a; JDK 8&#xff1a; Lambda 表达式&#xff1a;引入了函数式编程的概念&#xff0c;使得代码更简洁、可读性更强。Stream API&#xff1a;提供了一种高效处理集合数据的方式&#xff0c;支持并行处理。默认…

Python能做大项目(7) - Poetry: 项目管理的诗和远方之二

依赖管理 实现依赖管理的意义 我们已经通过大量的例子说明了依赖管理的作用。总结起来&#xff0c;依赖管理不仅要检查项目中声明的直接依赖之间的冲突&#xff0c;还要检查它们各自的传递依赖之间的彼此兼容性。 Poetry 进行依赖管理的相关命令 在 Poetry 管理的工程中&am…

基于电商场景的高并发RocketMQ实战-Commitlog基于内存的高并发写入优化、基于JVM offheap的内存读写分离机制

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 【11来了】文章导读地址&#xff1a;点击查看文章导读&#xff01; &#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f341;&#x1f3…

Flutter开发一个Wifi信号测量应用

在之前的一篇文章中我介绍了如何用Jetpack compose来开发一个Android的Wifi信号测量应用&#xff0c;使得可以根据室内不同地点的Wifi信号来生成指纹&#xff0c;用于室内导航&#xff0c;详情可见Jetpack Compose开发一个Android WiFi信号测量应用-CSDN博客。但是Jetpack comp…

【Hadoop】ZooKeeper数据模型Znode

ZooKeeper 数据模型ZnodeZooKeeper 中的时间ZooKeeper 节点属性 ZooKeeper 数据模型Znode 前面提过&#xff0c;Zookeeper相当于文件系统通知机制。既然是文件系统&#xff0c;那就涉及数据模型。 ZooKeeper 的数据模型在结构上和Unix标准文件系统非常相似&#xff0c;都是采用…

分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】

分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】 目录 分类预测 | Matlab实现SCSO-SVM基于沙猫群优化算法优化支持向量机的多变量分类预测【23年新算法】分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现SCSO-…

C# WPF上位机开发(windows pad上的应用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 大部分同学可能都认为c# wpf只能用在pc端。其实这是一种误解。c# wpf固然暂时只能运行在windows平台上面&#xff0c;但是windows平台不仅仅是电脑…

听GPT 讲Rust源代码--src/tools(27)

File: rust/src/tools/clippy/clippy_lints/src/methods/suspicious_to_owned.rs 文件rust/src/tools/clippy/clippy_lints/src/methods/suspicious_to_owned.rs的作用是实施Clippy lint规则&#xff0c;检测产生潜在性能问题的字符转换代码&#xff0c;并给出相关建议。 在Rus…

概率论中的 50 个具有挑战性的问题 [第 6 部分]:Chuck-a-Luck

一、说明 我最近对与概率有关的问题产生了兴趣。我偶然读到了弗雷德里克莫斯特勒&#xff08;Frederick Mosteller&#xff09;的《概率论中的五十个具有挑战性的问题与解决方案》&#xff09;一书。我认为创建一个系列来讨论这些可能作为面试问题出现的迷人问题会很有趣。每篇…

详解ibm_t60(945)的板子的保护隔离和ec的待机供电

1.,首先看ec待机条件: 待机供电&#xff0c;32k时钟&#xff0c;复位&#xff0c;适配器检测&#xff0c;开关信号。但是视频居然是找适配器的接口&#xff0c;跟着视频走&#xff0c;所以我先找打了适配器接口j24。vint20为公共点&#xff0c;我查了vint20的所有接线发现没有小…

js右击自定义菜单

功能点&#xff1a;右击阻止默认事件 根据js提供方法window.getSelection()判断当前有值则出现菜单 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…

现代 NLP:详细概述,第 1 部分:transformer

阿比吉特罗伊 一、说明 近五年来&#xff0c;随着 BERT 和 GPT 等思想的引入&#xff0c;我们在自然语言处理领域取得了巨大的成就。在本文中&#xff0c;我们的目标是逐步深入研究改进的细节&#xff0c;并了解它们带来的演变。 二、关注就是你所需要的 2017 年&#xff0c;来…

CSRF(Pikachu)

CSRF&#xff08;get&#xff09; 首先我们先登录账号 admin 密码是&#xff1b;123456 点击修改个人信息 用F12或者BP 抓包看看我们的url 那么构成的CSRF攻击payload为http://pikachu.shifa23.com/pikachu/vul/csrf/csrfget/csrf_get_edit.php?sexboy&phonenum”手机…

美团开店宝集成策略:API连接助力用户运营与客服系统

无代码开发与美团开店宝API的协同作用 随着电子商务的快速发展&#xff0c;商家们迫切需要一种既能提高效率又能降低技术门槛的电商管理方案。美团开店宝API提供了这样一种解决方案&#xff0c;特别是当与无代码开发结合时&#xff0c;它的优势更加明显。无代码开发免去了商家…

44.常用shell之 export - 设置或显示环境变量 的用法及衍生用法

export 是一个在类 Unix 系统的 shell 中常用的命令&#xff0c;用于设置或显示环境变量。环境变量是在操作系统层面定义的&#xff0c;用于控制程序的行为和访问系统资源。以下是 export 命令的基本用法和一些衍生用法的示例&#xff1a; 基本用法 设置环境变量: export VARv…

Django-REST-Framework 如何快速生成Swagger, ReDoc格式的 REST API 文档

1、API 接口文档的几种规范格式 前后端分离项目中&#xff0c;使用规范、便捷的API接口文档工具&#xff0c;可以有效提高团队工作效率。 标准化的API文档的益处&#xff1a; 允许开发人员以交互式的方式查看、测试API接口&#xff0c;以方便使用将所有可暴露的API接口进行分…