记录grid布局属性

grid布局

分为容器项目元素

容器属性

#container{display:grid;grid-template-columns:100px 100px 100px;/* 1fr 表示比例为占1份 */grid-template-columns:1fr 100px 1fr;/*100px为1列,自动填充,容器宽度不足则换行*/grid-template-columns:repeat(auto-fill,100px);/* 表示列为100px 以及 最大值为1fr,最小值为100px的列 */grid-template-columns:100px maxmin(100px,1fr)grid-template-columns: 100px auto 100px;grid-template-columns:repeat(auto-fit,100px);/*  行列之间网格线默认是1开头,可以取别名 */grid-template-rows:[a] 100px [b] 100px [c] 100px [d];/* 行列间的间隔 */grid-column-gap:20px;grid-row-gap:20px;/* 行列间隔 简写 */grid-gap:20px 20px;/* 指定区域的别名,一般与子项目的grid-area配合使用 */grid-template-areas:`a b cd e fg h i`;/* 默认是 row,先行后列 , dense 表示由于 排列有空白时 后面的项目尽可能补充到该空白处*/grid-auto-flow: row| row dense | column | column dense;/* *-items系列指定所有单元格中内容的排列方式 ,默认不指定时子项目为stretch,铺满整个块,除非子项目指定了width,height*/justify-items: start | center | end | stretch;align-items: start | center | end | stretch;place-items: <align-items> <justify-items>;/* *-content系列指定整个内容区域(指由列和行组成的区域,不一定占满容器)在容器内的位置  */justify-content:start | center | end | stretch | space-between  space-around | space-evenly;align-content:start | center | end | stretch | space-between  space-around | space-evenly;place-content: <align-content> <justify-content>;/* grid-auto-* 系列表示如果子项目超过单元格数量时,新增的行和列的宽高 */grid-auto-columns:50px;grid-auto-rows: 50px;
}

项目属性

以下属性是项目的属性

/* 根据网格线指定项目的定位,实现不同的单元格大小 */
grid-columns-start: 1;
grid-columns -end: 1;
grid-rows-start: 1;
grid-row-end: 1;
/* 简写 */
grid-column: 1 / 3; /* 相当于 1 号,3 号网格线*/
grid-row: <start-line> / <end-line>/* 与容器定义的 grid-template-areas 配合指定项目位置 */
grid-area: a;/* 单个项目指定在单元格内排列方式 */
justify-self: start | center | end | stretch;
align-self: start | center | end | stretch;
place-self: <align-self> <justify-self>;

开发常用布局

  1. 水平两栏布局
    一般设置grid布局,grid-template-columns设置列数和列宽,行高由子项目撑开,
#container{display:grid;grid-template-columns: repeat(2,1fr);
}
  1. 容器宽度不定,子项目宽高固定,换行排列,比flex布局方便,关键在repeat(auto-fill,100px)
#container{display:grid;grid-template-columns: repeat(auto-fill,100px);
}

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

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

相关文章

Unity处理Socket粘包拆包

现在游戏协议的数据格式基本上都是用protobuf协议格式&#xff0c;而protobuf最后会转换为二进制&#xff0c;所以这个例子实现的逻辑的也是二进制的处理。 处理粘包拆包的逻辑主要是在DecodePackage方法中。 using System; using System.Collections; using System.Collecti…

2.XSS-存储型

储存型XSS 或持久型 XSS 交互的数据会被存在在数据库里面,永久性存储,具有很强的稳定性。 在留言板里面进行测试一下是否有做过滤 "<>?&66666点击提交 查看元素代码&#xff0c;已经提交完成&#xff0c;并且没有做任何的过滤措施 接下来写一个javascrip…

select实现超时保护机制

1、使用channel优雅地关闭服务 package mainimport ("context""fmt""net/http""os""os/signal""syscall""time" )func IndexHandler(w http.ResponseWriter, r *http.Request) {if r.Method ! http.Me…

软件工程学系统设计

一、概述 软件设计阶段用比较抽象概括的方式确定目标系统如何完成预定的任务&#xff0c;即确定系统的物理模型。 回答系统 “做什么”。 软件设计是将需求转化为最终产品的唯一途径&#xff0c;是后续开发和维护工作的基础。 1、软件设计过程 从工程管理角度&#xff0c;…

AI 语录(一)

Midjourney创始人谈AI Midjourney创始人关于AI的一些看法给了我新的输入&#xff0c;AI越来越智能化给人了一种脊背发凉的感觉&#xff0c;但是从新水源和冲浪板的角度看&#xff0c;学习驾驭AI和AI共存的方式更加积极也更加合理。 "当计算机比99%的人善于视觉想象的时候…

AI网络爬虫:用deepseek批量提取gptstore.ai上的gpts数据

网站首页&#xff1a;https://gptstore.ai/gpts/categories/finance 翻页规律如下&#xff1a; https://gptstore.ai/_next/data/S9vKNrHo4K82xWjuXpw-O/en/gpts/categories/finance.json?slugfinance&page2 https://gptstore.ai/_next/data/S9vKNrHo4K82xWjuXpw-O/en/g…

Python | Leetcode Python题解之第172题阶乘后的零

题目&#xff1a; 题解&#xff1a; class Solution:def trailingZeroes(self, n: int) -> int:ans 0while n:n // 5ans nreturn ans

目标检测经典算法及其应用

目标检测是计算机视觉领域中的一项核心技术,它旨在让计算机能够像人眼一样识别和定位图像或视频中的物体。具体来说,目标检测不仅需要识别出图像或视频中有哪些对象,还要确定它们在图像或视频中的位置(通常以边界框的形式表示)以及它们的类别。 目标检测的基本框架通常包括…

MySQL与SQLite的区别

MySQL 和 SQLite 是两种常见的关系型数据库管理系统&#xff0c;但它们在设计目标、架构和使用场景上有显著的区别。以下是它们的主要区别&#xff1a; 1. 架构与模式 MySQL&#xff1a; 客户端/服务器模式&#xff1a;MySQL 采用 C/S 架构&#xff0c;数据库服务器运行在一…

【六】【QT开发应用】信号和信号槽的五种写法

第一种写法 第二种写法 第三种写法 第四种写法 第五种写法 完整代码 mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEclass MainWindow : public QMainWindow …

Golang | Leetcode Golang题解之第172题阶乘后的零

题目&#xff1a; 题解&#xff1a; func trailingZeroes(n int) (ans int) {for n > 0 {n / 5ans n}return }

用全志T113做了块多功能卡片电脑,成本只要60块

FunnyPi-T113是一款基于全志T113-S3/D1S处理器的完全开源多功能开发板&#xff0c;设计FunnyPi最初的目的是想借此T113卡片电脑来满足日常学习&#xff0c;并结合T113高效能和低功耗的特点&#xff0c;来满足像语音助手&#xff0c;智能家居屏幕、桌面摆件屏、博客服务器等嵌入…

React@16.x(35)动画(下)封装动画组件需要注意的问题

目录 1&#xff0c;封装举例2&#xff0c;问题2.1&#xff0c;timeout2.2&#xff0c;配合 SwitchTransition / TransitionGroup 接上篇文章 React动画&#xff08;中&#xff09; 1&#xff0c;封装举例 封装一个渐入渐出效果的动画组件 import { CSSTransition } from &qu…

Maven笔记(更新中)

一、Maven简介 Maven是一款为Java项目构建,依赖管理的工具(软件),使用Maven可以自动化构建,测试,打包和发布项目,大大提高了开发效率和质量 Maven主要作用理解 依赖管理 Maven可以管理项目的依赖,包括自动下载所需依赖库,自动下载依赖所需的依赖并且保证版本没有冲突,依赖版…

(五)数据采集与处理基础练习题(17道选择题)

本文整理了数据采集与处理基础相关的练习题&#xff0c;共17道&#xff0c;适用于想巩固理论基础的同学。来源&#xff1a;如荷学数据科学题库&#xff08;CDA二级-第二三四章&#xff09;。 1&#xff09; 2&#xff09; 3&#xff09; 4&#xff09; 5&#xff09; 6&#x…

电脑系统重装怎么操作?分享四个win10重装系统方法

“我遇到了一些笔记本电脑的问题&#xff0c;别人告诉我解决这个问题需要重新安装Win10电脑系统。但我不记得我把光盘放在哪里了&#xff0c;我能否在不丢失文件的情况下重新安装操作系统&#xff1f;电脑系统重装怎么操作&#xff1f;”虽然电脑自带系统中有多种方法可供选择&…

工业边缘计算网关

1 介绍 HINETG系列边缘计算网关&#xff08;Linux操作系统&#xff09;&#xff0c;是华辰智通的—款面向工业现场设备接入、数据采集、设备监控的工业级边缘计算网关。采用ARM Cortex-A7 800MHz高性能CPU,拥有以太网、串口、CAN口、IO口等丰富的接口&#xff0c;支持以太网、…

项目实践---Windows11中安装Zookeeper/Hadoop/Hive的部分问题解决

一.Hadoop与Hive兼容版本选择 正常来说&#xff0c;Hadoop与Hive版本不兼容会出现很多问题导致hive安装失败&#xff0c;可以先确定HIve的版本&#xff0c;比如&#xff1a;要用Hive3.1.2版本&#xff0c;该如何确定使用Hadoop的版本呢&#xff0c;需要我们在hive源码中找到对…

开发 Golang 项目的 Docker 化案例

开发 Golang 项目的 Docker 化案例 在这个案例中&#xff0c;我们将展示如何使用 Docker 容器化一个简单的 Golang Web 应用。我们将创建一个基于 Go 的 Hello World 应用&#xff0c;并使用 Docker 和 Docker Compose 管理容器化环境。 1. 创建 Golang Web 应用 首先&#…

C++ 最小生成树

描述 一个有 n 户人家的村庄&#xff0c;有 m 条路相互连接着。村里现在要修路&#xff0c;每条路都有一个成本价格&#xff0c;现在请你帮忙计算下&#xff0c;最少需要花费多少钱&#xff0c;就能让这 n 户人家连接起来。cost 为一个二维数组&#xff0c;每个元素是一个长度…