Grid布局

news/2025/3/15 23:39:35/文章来源:https://www.cnblogs.com/haima/p/18234290

目录
  • Grid布局
    • 概述
    • Grid 布局和 flex 布局
    • 网格布局的属性
    • 容器和项目
    • 网格轨道
    • 网格线

Grid布局

概述

Grid 布局即网格布局,目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系,目前唯一一种 CSS 二维布局。在兼容性方面,截至目前,几乎所有的浏览器都对 CSS Grid 提供了原生的支持。
Grid布局优点:这是一个二维布局系统,最大优点就是可以同时处理列和行.

Grid 布局和 flex 布局

flex 布局和 Grid 布局有实质的区别:

  • flex 布局是一维布局
  • Grid 布局是二维布局

flex 布局一次只能处理一个维度上的元素布局,一行或者一列。
Grid 布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。

网格布局的属性

属性的基本概念:

  1. 容器(container)——有容器属性
  2. 项目(items)——有项目属性
  3. 行(row)
  4. 列(column)
  5. 间距(gap) ——单元格之间的距离
  6. 区域(area)—— 自己划分每个单元格占据的区域
  7. 内容(content)

容器和项目

Gridflex 类似,布局的属性都是分为两类,一类定义在容器上,称为容器属性,一类定义在项目上,称为项目属性
采用网格布局的区域,称为“容器”。容器内部的采用网格定位的子元素称为“项目”

<div class="box">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>
</div>

上面的代码中,box就是容器,item就是项目

网格轨道

通过 grid-template-rowsgrid-template-columns 指定当前容器的行和列后,这里的行和列就是网格轨道。但在实际页面中,由于页面的内容不确定,内容可能会超过 grid-template-columnsgrid-template-rows 指定的网格轨道个数,这个时候网格将会在隐式网格中创建行和列。按照默认,这些轨道将自动定义尺寸,所以会根据它里面的内容改变尺寸。

网格线

网格线是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右;垂直方向是从上往下。网格线的编号都是从 1 开始的。

image

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

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

相关文章

产品功能架构图

产品功能架构图的绘制可以帮助团队更清晰地了解产品的功能结构,有助于沟通和协作。它也可以用于指导产品开发过程,帮助开发团队更好地理解产品需求和功能实现方式。现实情况是,很多产品初期都是在公司阶段,非常的模糊,这个时候boss让你画个产品架构图,你很抓瞎,大千UI工…

GPU与DSA架构分析

GPU与DSA架构分析GPU、GPGPU、DSA、FPGA、ASIC等AI芯片特性及对比GPUGPU(Graphics Processing Unit,图形处理器)是一种专门用于处理图形和图像的处理器。它是计算机的重要组成部分,主要用于加速图形和图像的处理和渲染。与传统的中央处理器(CPU)相比,GPU具有更多的并行处…

k8s组件和网络插件挂掉,演示已有的pod是否正常运行

环境 03 master ,05 06是node[root@mcwk8s03 mcwtest]# kubectl get nodes -o wide NAME STATUS ROLES AGE VERSION INTERNAL-IP EXTERNAL-IP OS-IMAGE KERNEL-VERSION CONTAINER-RUNTIME mcwk8s05 Ready <none> 58…

W801单片机入门开发环境设置

W801单片机入门开发环境设置开发软件下载 烧录工具和SDK 在 WinnerMicro的网站 https://www.winnermicro.com/html/1/156/158/558.htmlch340 USB串口驱动 如果没有的话 https://www.onlinedown.net/soft/1164748.htm开发用的IDE CDK 在平头哥的网站 https://www.xrvm.cn/soft-t…

嵌入式笔记5.1 定时器详解

目录一、SysTick——系统节拍定时器1. 信息介绍2. 功能介绍(工作模式)3. 寄存器介绍4. 使用方式5. 其他信息二、RTC——实时时钟1. 信息介绍2. 寄存器详解0. 寄存器地址1. RTC 时间寄存器(RTC_TR)2. RTC 日期寄存器(RTC_DR)3. RTC 亚秒寄存器(RTC_SSR)4. RTC 初始化控制…

嵌入式作业5.1 定时器编程

目录SysTick代码编写步骤程序代码运行效果RTC程序代码运行效果注意1. 代码问题2. 闹钟设置问题TIMPWM程序代码运行效果代码分析(设计思想)注意代码错误为什么使用 GPIO 输入寄存器读取 TIM 输出比较模式输出的电平其他输入捕获程序代码运行效果 SysTick 利用 SysTick 定时器编…

C - Keys

C - Keys https://atcoder.jp/contests/abc356/tasks/abc356_c思路 对于样例1中的两种情况,可以推知如下推论: (1)1 2为real keys (2)1 3 为real keys, (3)上面两个不能同为真。更一般的情况,可以把测试用例分为 正测试样例 和 负测试样例 正测试样例, 测试key集中…

C# ASP.NET Core 中 IWebHostEnvironment 接口的作用是什么?

原文链接:https://www.php.cn/faq/603903.html IWebHostEnvironment 提供有关 Web 托管环境和 应用程序正在运行。 属于命名空间 Microsoft.AspNetCore.Hosting IWebHostEnvironment 接口需要作为依赖项注入到 控制器,然后在整个控制器中使用。 IWebHostEnvironment 接口有两…

WPF 数据模板

数据模板常用在3种类型的控件, 下图形式:

TCP实现公网服务器和内网客户端一对多访问(C语言实现)

TCP实现公网服务器和内网客户端一对多访问, 且相互实时通信.V1.0 2024年6月5日 发布于博客园目录理论代码服务器端客户端 理论 服务器端先运行, 能够接收来自任何地方的多个客户端发起的指向特定端口(这里是50002)的TCP请求, 并和客端建立稳定的TCP连接. 没有连接请求时等待, 有…

Base64编码

Base64 编码/解码 - 锤子在线工具 (toolhelper.cn) Base64 - 维基百科,自由的百科全书 (wikipedia.org) RFC 4648 - The Base16, Base32, and Base64 Data Encodings (ietf.org).Base64是一种,基于64个可打印字符对二进制数据进行编码的方法 Base64的应用场景主要是对传输文本…

代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素(数组)

第一次打卡,记录还不够充分,会慢慢丰富起来 一、二分查找 题目链接:704.二分查找-力扣(LeetCode) 讲解链接:Carl讲解视频讲解:代码随想录讲解情况1:左闭右闭区间情况2:左闭右开区间 二、移除元素 题目链接:27.移除元素-力扣(LeetCode) 讲解链接:Carl讲解视频讲解:代…