CSS-grid布局

  • 网格布局也叫grid布局,平常写样式的时候基本上都是用的flex布局。
    像以下布局,用flex布局就可能会有有点麻烦,这时候用grid布局就方便的多了。

在这里插入图片描述
在这里插入图片描述

或者是照片墙

grid布局就是将容器划分为行和列,产生单元格,然后在指定的单元格,可以看作是二维布局,我们一直经常用的flex布局也就可以看作一维布局。
介绍
gird布局很强大,采用网格布局的区域,称为容器。容器内部子元素,称为项目,即container->item。
容器属性
Gird布局的属性分为两类。一类定义在容器上面,称为容器属性,另一类定义在项目上面,称为项目属性。这部分先介绍容器属性。
display属性
display: grid指定一个容器采用网格布局。
1.grid的属性

  1. grid-template-columns:定义每一行列的列宽。
  2. grid-template-rows:定义每一行的行高。
    还有一种重复某种不固定大小模式:
    grid-template-columns:repeat(2,100px 80px);
    代表重复2次100px 80px的模式,也就是4列,等同于:
    grid-template-columns:100px 80px 100px 80px;
    下面举个例子:
    HTM:
1
2
3
4
5
6
7
8
9
css: .father { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-columns: repeat(2, 100px 80px); } 效果:![在这里插入图片描述](https://img-blog.csdnimg.cn/532f6ce68e2641c79b9c0e1808400dd1.png)

上面写了9个元素,分别给了不同的颜色,根据 grid-template-columns和grid-template-rows或者grid-template-columns来设置他们的大小,这里的特殊就是,如果不给里面各个单元格大小,那么设置的列宽和行高就会去设置成每个单元格的大小,如果给了大小,那么设置的就是每个单元格之前的间距了。
2.关键字
1.auto-fill;如果容易大小不固定,项目大小固定,可以用auto-fill关键字填充;
自动填充: repeat(auto-fill, 30px)
在这里插入图片描述

也就是设置每个单元格的大小都一样,然后并列排放。
2.fr(fraction):如果两列的宽分别是1fr和2fr,就表示后者是前者的两杯。
例子:
grid-template-columns: 1fr 2fr 4fr 1fr 1fr;
在这里插入图片描述

这里设置后会发现如果设置的列多了,那后者的倍数都是基于第一位叠加的。
3.minmax();长度范围
grid-template-columns: 1fr 5fr minmax(100px, 1fr);
在这里插入图片描述

第一列是1fr,第二列是5fr,第三列最小值是100px,最大是1fr。当第二列fr无限大时和的第三列到100px时,会往第一列截止。这里指的无限大也就是没有父级设置大小。
4.auto;自适应
grid-template-columns: 100px auto 100px;
在这里插入图片描述

自适应也就是自动填充完剩余的空间(不设置最大值最小值的情况下)
5.网格名称
网格闲名称,同一根线可以有多个名称:
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
指定每一根网格线的名字,方便以后的引用。也可以有多个名字;[c1,c1a]
6.区域
grid-template-areas:网格布局允许置顶区域(area),一个区域由单元格或多个单元格组成。grid-template-areas属性用于定义区域。
grid-template-areas: ‘a b c’ ‘d e f’ ‘g h i’;
div:nth-child(1) {
grid-area: a;
}
在这里插入图片描述

可以实现类似于这样一个单元格占多个位置的情况。
7.放置顺序
grid-auto-flow:划分网格后,容器的子元素也会按照顺序,自动放置在每一个网格中。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行;也可设置为column变成先填满第一列再填第二列;
grid-auto-flow:column
在这里插入图片描述

8.单元格水平位置与垂直位置
justify-items:属性设置单元格内容的水平位置(左中右);
align-items:属性设置单元格内容的垂直位置(上中下);

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。
    justify-items:
    align-items:
    在这里插入图片描述

9.整体内容的位置
justify-content:整个内容区域在容器里面的水平位置(左中右);
align-content:整个内容区域的垂直位置(上中下)。
justify-content
align-content
在这里插入图片描述

总结
Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局,Grid 布局则是将容器划分成“行"和“列”,产生单元格,然后指定"项目所在”的单元格,可以看作是二维布局,Grid布局远比 Flex布局强大。(不过存在兼容性问题,使用之前应看具体需求)
兼容性

https://caniuse.com/?search=grid

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ArcGIS Pro技术应用(暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合)

GIS是利用电子计算机及其外部设备,采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲,它是在一定的地域内,将地理空间信息和 一些与该地域地理信息相关的属性信息结合起来,达到对地理和属性信息的综合管理。GIS的…

机器学习笔记之优化算法(十一)凸函数铺垫:梯度与方向导数

机器学习笔记之优化算法——凸函数铺垫:梯度与方向导数 引言回顾:偏导数方向余弦方向导数方向导数的几何意义方向导数的定义 方向导数与偏导数之间的关联关系证明过程 梯度 ( Gradient ) (\text{Gradient}) (Gradient) 引言 本节作为介绍凸函数的铺垫&a…

【华秋推荐】新能源汽车中的T-BOX系统,你了解多少?

近几年,新能源汽车产业进入了加速发展的阶段。我国的新能源汽车产业,经过多年的持续努力,技术水平显著提升、产业体系日趋完善、企业竞争力大幅增强,呈现市场规模、发展质量“双提升”的良好局面。同时,通过国家多年来…

IDEA每次启动indexing解决办法

每次启动indexing很浪费时间。 解决办法 setting中搜索index 设置如下: 这样设置以后,启动速度明显快多了。 参考 https://blog.csdn.net/qq_45162113/article/details/121128721

Leetcode24 两两交换链表相邻的节点

迭代解法: class Solution {public ListNode swapPairs(ListNode head) {ListNode dummyHead new ListNode(0);dummyHead.next head;ListNode temp dummyHead;while (temp.next ! null && temp.next.next ! null) {ListNode node1 temp.next;ListNode n…

【单片机】51单片机,晨启科技,板子引脚对应关系

一般引脚: sbit beepP2^4; //将单片机的P2.4端口定义为beep.本口用于屏蔽上电后蜂鸣器响 sbit ledP1^0; //将单片机的P1.0端口定义为led,用于点亮LED-D1 sbit DIG1P0^0; //数码管位选1 sbit DIG2P0^1; //数码管位选2P10xFF;//初始化P1引脚全部置高&a…

树莓派安装Ubuntu系统(无屏幕)

树莓派安装ubuntu系统 前言 软件需要: 1.方案一 win32diskimager-1.0.0-install.exe SDFormatterha Ubuntu镜像(可以官网下载也可以清华源) 方案二: 树莓派镜像烧录器 树莓派镜像烧录器直达下载 硬件需要: 64GB内存卡(推荐Sanddisk Ultra&am…

Java并发编程第4讲——Java中的锁(知识扫盲)

目录 一、锁的相关概念 1.1 什么是锁 1.2 为什么需要锁 1.3 Java中锁的分类 二、synchronized关键字 2.1 三个特点 2.2 三种表现形式(🙋‍♂️) 2.3 sychronized是怎么实现的(🙋‍♂️) 2.4 JDK1.…

用MariaDB创建数据库,SQL练习,MarialDB安装和使用

前言:MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MySQL的代替品。在存储引擎方面,使用XtraDB来代替MySQ…

有血有肉的PPT

1、PPT是Powerpoint缩写 2、引申的含义是Powerpoint Power(力量/能量) Point(观点/要点) 3、用PPT做的文档是讲演稿,讲演的内容要有力度,之所以要去演讲是为了能够影响受众 4、其次演讲稿上的内容要列出要点、表明观点,所以一般P…

Jmeter入门之digest函数 jmeter字符串连接与登录串加密应用

登录请求中加密串是由多个子串连接,再加密之后传输。 参数连接:${var1}${var2}${var3} 加密函数:__digest (函数助手里如果没有该函数,请下载最新版本的jmeter5.0) 函数助手:Options > …

2.CUDA 编程手册中文版---编程模型

2.编程模型 更多精彩内容,请扫描下方二维码或者访问https://developer.nvidia.com/zh-cn/developer-program 来加入NVIDIA开发者计划 本章通过概述CUDA编程模型是如何在c中公开的,来介绍CUDA的主要概念。 编程接口中给出了对 CUDA C 的广泛描述。 本章…

在Ubuntu中使用Docker启动MySQL8的天坑

写在前面 简介: lower_case_table_names 是mysql设置大小写是否敏感的一个参数。 1.参数说明: lower_case_table_names0 表名存储为给定的大小和比较是区分大小写的 lower_case_table_names 1 表名存储在磁盘是小写的,但是比较的时候是不区…

微服务Eureka注册中心

目录 一、Eureka的结构和作用 二、搭建eureka-server 三、服务注册 四、服务发现 假如我们的服务提供者user-service部署了多个实例,如图: 存在的问题: order-service在发起远程调用的时候,该如何得知user-service实例的ip地址…

使用自己的数据集预加载 Elasticsearch

作者:David Pilato 我最近在讨论论坛上收到一个问题,关于如何修改官方 Docker 镜像以提供一个现成的 Elasticsearch 集群,其中已经包含一些数据。 说实话,我不喜欢这个想法,因为你必须通过提 entrypoint.sh 的分叉版本…

管理类联考——逻辑——论证逻辑——汇总篇——真题和典例——解释

解释 1. 解释现象 199-2016-1-42——解释现象——并列现象——在二者之间建立联系 某公司办公室茶水间提供自助式收费饮料。职员拿完饮料后,自己把钱放到特设的收款箱中。研究者为了判断职员在无人监督时,其自律水平会受哪些因素的影响,特…

vscode的ros拓展(插件)无法渲染urdf

文章目录 事件背景资料调查解决方案 事件背景 之前在vscode中一直用得好好的urdf预览功能,突然在某一天,不行了。 执行 URDF Preview之后,虽然弹出了一个URDF Preview的窗口,但是这个窗口里面啥都没有。没有网格、没有模型。 一开…

低成本无刷高速吹风机单片机方案

高速吹风机的转速一般是普通吹风机的5倍左右。一般来说,吹风机的电机转速一般为2-3万转/分钟,而高速吹风机的电机转速一般为10万转/分钟左右。高转速增加了高风速。一般来说,吹风机的风力只有12-17米/秒,而高速吹风机的风力可以达…

uniapp 使用canvas画海报(微信小程序)

效果展示&#xff1a; 项目要求&#xff1a;点击分享绘制海报&#xff0c;并实现分享到好友&#xff0c;朋友圈&#xff0c;并保存 先实现绘制海报 <view class"data_item" v-for"(item,index) in dataList" :key"index"click"goDet…

CSDN到底要多少积分才有排名(图解)

2016年8月16日的截图&#xff1a; 2016年8月17日的截图&#xff1a; CSDN的排名是完全按照积分排的&#xff0c;只隔了22分而已&#xff0c;千里之外和2万名的差别就是卡在这个地方。 2016年10月18日的截图&#xff1a; 这是刚刚进入前7000名&#xff0c;刚好访问也是刚刚突破4…