当前位置: 首页 > news >正文

记录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);
}

相关文章:

记录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);/* …...

12.爬虫---PyMysql安装与使用

12.PyMysql安装与使用 1.安装 PyMySQL2.使用PyMySQL2.1创建数据表2.2连接数据库2.3增加数据2.4修改数据2.5查询数据2.6删除数据2.7关闭连接 3.总结 MySQL 安装可以看这篇文章MySql 安装与使用&#xff08;非常详细&#xff09; 1.安装 PyMySQL PyMySQL是Python中用于连接MySQL…...

VS2022遇到的两个问题

问题一&#xff1a;找不到定义的头文件 别的博主说是&#xff1a;在属性页里面进行改写&#xff0c;改成是&#xff0c;我试过之后并不行&#xff1b; 解决思路&#xff1a;但其实在右边视图里面找到你自己定义的头文件加到你运行文件中就行&#xff1b;因为程序就只有一个入口…...

【Android14 ShellTransitions】(六)SyncGroup完成

这一节的内容在WMCore中&#xff0c;回想我们的场景&#xff0c;是在Launcher启动某一个App&#xff0c;那么参与动画的就是该App对应Task&#xff08;OPEN&#xff09;&#xff0c;以及Launcher App对应的Task&#xff08;TO_BACK&#xff09;。在确定了动画的参与者后&#x…...

技术管理转型之战:决策之道-管理中的智慧与策略

文章目录 引言一、决策的重要性二、常见的决策方式1. 理性决策&#xff08;Rational Decision Making&#xff09;2. 有限理性&#xff08;Bounded Rationality&#xff09;3. 直觉决策&#xff08;Intuitive Decision Making&#xff09;4. 循证管理&#xff08;Evidence-Base…...

Shell脚本:条件语句(if、case)

目录 硬编码 硬编码的缺点 条件判断 $? 命令行语句 判断指定目录是否存在 判断指定文件是否存在 判断指定对象是否存在 表达式形式语句 判断对象是否存在 判断对象是否有权限 与、或、非 运算 与运算 或运算 非运算 比较大小 判断磁盘利用率实验步骤 字符串…...

在Linux上为Windows目标配置Qt交叉编译

问题描述 我想使用Linux x86_64主机为Windows x86_64目标交叉编译Qt库&#xff08;最终也包括我的应用程序&#xff09;。我觉得自己已经接近成功了&#xff0c;但可能对整个过程有一些基本的误解。 我从在我的Fedora机器上安装所有mingw包开始&#xff0c;并修改了win32-g的…...

Introduction to linear optimization 第 2 章课后题答案 11-15

线性规划导论 Introduction to linear optimization (Dimitris Bertsimas and John N. Tsitsiklis, Athena Scientific, 1997)&#xff0c; 这本书的课后题答案我整理成了一个 Jupyter book&#xff0c;发布在网址&#xff1a; https://robinchen121.github.io/manual-introdu…...

Java——包

一、包 1、简要介绍 在Java编程语言中&#xff0c;包&#xff08;Package&#xff09; 是一种用来组织和管理类&#xff08;Class&#xff09;和接口&#xff08;Interface&#xff09;的机制。包为开发者提供了一种逻辑分组的方式&#xff0c;使代码更加模块化、结构化和易于…...

Pipeline知识小记

在scikit-learn&#xff08;通常缩写为sklearn&#xff09;中&#xff0c;Pipeline是一个非常重要的工具&#xff0c;它允许你将多个数据转换步骤&#xff08;如特征选择、缩放等&#xff09;和估计器&#xff08;如分类器、回归器等&#xff09;组合成一个单一的估计器对象。这…...

postman国内外竞争者及使用详解分析

一、postman简介 Postman 是一款广泛使用的 API 开发和测试工具&#xff0c;适用于开发人员和测试人员。它提供了一个直观的界面&#xff0c;用于发送 HTTP 请求、查看响应、创建和管理 API 测试用例&#xff0c;以及自动化 API 测试工作流程。以下是 Postman 的主要功能和特点…...

人工智能对决:ChatGLM与ChatGPT,探索发展历程

图: a robot is writing code on a horse, By 禅与计算机程序设计艺术 目录 ChatGLM:...

探索Python元类的奥秘及其应用场景

探索Python元类的奥秘及其应用场景 一、引言 在Python中&#xff0c;元类&#xff08;Metaclasses&#xff09;是一个相对高级且容易被忽视的主题。然而&#xff0c;对于深入理解Python的面向对象编程模型以及进行高级框架和库的设计来说&#xff0c;元类是一个不可或缺的工具…...

C语言基础关键字的含义和使用方法

​关键字在C语言中扮演着非常重要的角色&#xff0c;它们定义了语言的基本构造和语法规则&#xff0c;通过使用关键字&#xff0c;开发者可以创建变量、定义数据类型、控制程序流程&#xff08;如循环和条件判断&#xff09;、声明函数等。由于这些字是保留的&#xff0c;所以编…...

【Golang - 90天从新手到大师】Day09 - string

系列文章合集 Golang - 90天从新手到大师 String 一个字符串是一个不可改变的字节序列。字符串可以包含任意的数据&#xff0c;但是通常是用来包含人类可读的文本。 len()返回字符串字节数目&#xff08;不是rune数&#xff09;。 通过索引可以访问某个字节值&#xff0c;0…...

网络安全与区块链技术:信任与安全的融合

# 网络安全与区块链技术&#xff1a;信任与安全的融合 在网络空间&#xff0c;信任是一种宝贵而稀缺的资源。区块链技术以其独特的分布式账本、加密算法和共识机制&#xff0c;为构建网络安全提供了新的解决方案。本文将探讨网络安全与区块链技术如何融合&#xff0c;以增强信…...

MySQL之复制(九)

复制 复制管理和维护 确定主备是否一致 在理想情况下&#xff0c;备库和主库的数据应该是完全一样的。但事实上备库可能发生错误并导致数据不一致。即使没有明显的错误&#xff0c;备库同样可能因为MySQL自身的特性导致数据不一致&#xff0c;例如MySQL的Bug、网络中断、服务…...

【面试干货】 Java 中的 HashSet 底层实现

【面试干货】 Java 中的 HashSet 底层实现 1、HashSet 的底层实现2、 HashSet 的特点3、 总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; HashSet 是 Java 集合框架中的一个重要成员&#xff0c;它提供了不存储重复元素的集合。但是&am…...

爬虫经典案例之爬取豆瓣电影Top250(方法二)

在上一篇文章的基础上&#xff0c;改进了代码质量&#xff0c;增加了多个正则表达式匹配&#xff0c;但同事也增加了程序执行的耗时。 from bs4 import BeautifulSoup import requests import time import re from random import randint import pandas as pdurl_list [https…...

如何优化React应用的性能?

优化React应用的性能是一个多方面的过程&#xff0c;涉及到代码的编写、组件的设计、资源的管理等多个层面。以下是一些常见的性能优化策略&#xff1a; 避免不必要的渲染: 使用React.memo、useMemo和useCallback来避免组件或其子组件不必要的重新渲染。 代码分割: 使用React.…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...

Copilot for Xcode (iOS的 AI辅助编程)

Copilot for Xcode 简介Copilot下载与安装 体验环境要求下载最新的安装包安装登录系统权限设置 AI辅助编程生成注释代码补全简单需求代码生成辅助编程行间代码生成注释联想 代码生成 总结 简介 尝试使用了Copilot&#xff0c;它能根据上下文补全代码&#xff0c;快速生成常用…...

PostgreSQL 与 SQL 基础:为 Fast API 打下数据基础

在构建任何动态、数据驱动的Web API时&#xff0c;一个稳定高效的数据存储方案是不可或缺的。对于使用Python FastAPI的开发者来说&#xff0c;深入理解关系型数据库的工作原理、掌握SQL这门与数据库“对话”的语言&#xff0c;以及学会如何在Python中操作数据库&#xff0c;是…...