程序员经验分享-hwhale

体验css：repeat和grid

2023-11-13

一、repeat

要想了解grid布局，首先了解 repeat() 的作用。

1. 语法

  • 见名知意，repeat() 函数表示轨道列表的重复片段。
  • 目前只有放在 grid-template-columns和grid-template-rows 上才有效。
  • 语法：repeat([auto-fill | auto-fit | <integer>] , [<line-names> ? [<fixed-size> | <track-size>]] + <line-names>?)
    • 轨道：一行叫行轨道，一列叫列轨道。
    • 第一个参数：auto-fill和auto-fit 会尽量在（一行/一列，看用的是...columns还是...rows）多创建轨道。重复次数就是重复创建多少次。
    • 第二个参数：轨道名、轨道尺寸。
    • 示例：repeat(4, [col-name] 1fr [col-name] 20px)
      在这里插入图片描述

2. auto-fill和auto-fit

在这里插入图片描述

  • 我比较喜欢用 auto-fit，可以填满整个父元素。
  • 不能只使用 fr、auto、min-content、max-content，否则一个占一行。比如：repeat(auto-fill, 1fr min-content)
  • 在 子元素总宽度 <= 父元素宽度时，差异比较明显：
<body>
<div class="container">
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
<div id="container">
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
</body>
<style>
    .container {
        display: grid;
        width: 600px;
        background-color: #ccc;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
        border: 1px dashed skyblue;
    }
    #container {
        display: grid;
        width: 600px;
        background-color: skyblue;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
        border: 1px dashed skyblue;
    }
</style>

在这里插入图片描述

  • 在 子元素总宽度 > 父元素宽度时，没什么差异：
    .container {
	 	...
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        ...
    }
    #container {
        ...
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        ...
    }

在这里插入图片描述

3. 专属尺寸

① fr

  • fr 单位代表网格容器中可用空间的一等份

② auto

  • 由浏览器决定长度。
  • 作为最大值，等同于 max-content。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值（如同min-width/min-height所指定的)）。
<body>
<div class="container">
    <div style="border: 1px solid black;height: 50px;">225255656sad56561</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
</body>
<style>
    .container {
        display: grid;
        width: 300px;
        background-color: #ccc;
        grid-gap: 5px;
        grid-template-columns: repeat(1, auto 20px);
        border: 1px dashed skyblue;
    }
</style>

在这里插入图片描述

③ max-content

  • 代表占据网格轨道的网格项目所分配的最大内容区域的最大值。
<body>
<div class="container">
    <div style="border: 1px solid black;height: 50px;">225255656sad56561</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
</body>
<style>
    .container {
        display: grid;
        width: 300px;
        background-color: #ccc;
        grid-gap: 5px;
        grid-template-columns: repeat(1, max-content 20px);
        border: 1px dashed skyblue;
    }
</style>

在这里插入图片描述

④ min-content

  • 代表占据网格轨道的网格项目所分配的最小内容区域的最小值。
<body>
<div class="container">
    <div style="border: 1px solid black;height: 50px;">225255656sad56561</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
    <div style="border: 1px solid black;height: 50px;">1</div>
</div>
</body>
<style>
    .container {
        display: grid;
        width: 300px;
        background-color: #ccc;
        grid-gap: 5px;
        grid-template-columns: repeat(1, min-content 20px);
        border: 1px dashed skyblue;
    }
</style>

在这里插入图片描述

二、grid

1. 设置grid布局

  • display: grid：块级元素。
<body>
1
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
2
</body>
<style>
    #container {
        display: grid;
        grid: repeat(2, 60px) / auto-flow 80px;
    }

    #container > div {
        background-color: #8ca0ff;
        width: 50px;
        height: 50px;
    }
</style>

在这里插入图片描述

  • display: inline-grid：行内元素。
<body>
1
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
2
</body>
<style>
    #container {
        display: inline-grid;
        grid: repeat(2, 60px) / auto-flow 80px;
    }

    #container > div {
        background-color: #8ca0ff;
        width: 50px;
        height: 50px;
    }
</style>

在这里插入图片描述

  • grid：可以用来设置多个属性。比如grid-template-rows、grid-template-columns 和 grid-template-areas等等。类似于 background 可以设置 bgColor、bgPosition。

2. 设置列宽行高

  • grid-template：用以定义网格中行、列与分区。
  • grid-template-columns：基于网格列的维度，定义网格线的名称和网格轨道的尺寸大小
  • grid-template-rows：基于网格行的维度，定义网格线的名称和网格轨道的尺寸大小
<body>
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
<style>
    #container {
        display: inline-grid;
        grid-gap: 5px;
        grid-template-columns: repeat(2, 50px);
        grid-template-rows: repeat(4, 50px);
    }

    #container > div {
        background-color: #8ca0ff;
        width: 50px;
        height: 50px;
    }
</style>

在这里插入图片描述

3. 设置间距

  • grid-row-gap：行间距
  • grid-column-gap：列间距
  • grid-gap：行列间距
<body>
<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
<style>
    #container {
        display: inline-grid;
        grid-column-gap: 10px;
        grid-row-gap: 20px;
        grid-template-columns: repeat(2, 50px);
        grid-template-rows: repeat(4, 50px);
    }

    #container > div {
        background-color: #8ca0ff;
        width: 50px;
        height: 50px;
    }
</style>

在这里插入图片描述

4. 设置分区

  • grid-template-areas 用于划分网格区域。
  • grid-area 用于指定网格所属哪个区域。
  • 取名的名字自己取，. 表示不会用到这个区域。
<body>
<div id="container">
    <header>header</header>
    <nav>nav</nav>
    <main>main</main>
    <footer>footer</footer>
</div>
</body>
<style>
    #container {
        display: grid;
        grid-template-columns: 50px 200px;
        grid-template-rows: 50px 200px 50px;
        grid-template-areas: ". head"
                            "nav main"
                            "foot foot";
    }

    header {
        grid-area: head;
        background-color: #fedcba;
    }
    nav {
        grid-area: nav;
        background-color: #abcdef;
    }
    main {
        grid-area: main;
        background-color: #654321;
    }
    footer {
        grid-area: foot;
        background-color: #98abcd;
    }
</style>

在这里插入图片描述

5. 设置布局排列顺序

  • grid-auto-flow 控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。（指定排列顺序）
  • 语法：grid-auto-flow: [ row | column ] || dense
  • 默认时row，即把一行填满再填下一行。
  • column：列顺序。
  • dense：指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

6. 设置单元格内容对齐方式

  • 用于设置单元格内容在单元格内的对齐方式。
  • justify-items：内容水平对齐（start | end | center | stretch）。
  • align-items：内容垂直对齐（start | end | center | stretch）。
  • place-items：可以同时设置垂直对齐和水平对齐。
  • 默认值是 stretch，铺满网格。

7. 设置整个网格对齐方式

  • 用于设置整个内容区域在容器中的对齐方式。
  • justify-content：容器水平对齐（start | end | center | stretch | space-around | space-between | space-evenly）。
  • align-content：容器垂直对齐（start | end | center | stretch | space-around | space-between | space-evenly）。
  • place-content：同时设置垂直对齐和水平对齐。
<body>
<div id="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
</body>
<style>
    #grid {
        height: 500px;
        width: 500px;
        display: grid;
        grid-gap: 10px;
        grid-template: repeat(3, 50px) / repeat(3, 50px);
        grid-auto-flow: row;
        background-color: #f70;
        place-items: stretch stretch;
        /* space-around space-between space-evenly */
        justify-content: space-around; 
    }
    #grid > div{
        background-color: #acd;
    }
</style>

在这里插入图片描述

8. 设置隐式网格大小

  • 如果一个表格项目被定位在没有使用 grid-template-columns 显式指定尺寸的列中，隐式的 grid 轨道就会被创建出来支撑它。显式地定位到超出范围的列中，或者通过自动布局算法创建额外的列，就会发生上述情况。
  • 翻译一下上面的：如果只设置了两列列宽，那这两列是显式网格，其他都是隐式网格（因为没设置到）。
  • grid-auto-rows、grid-auto-columns设置隐式网格大小。
<body>
<div id="grid">
    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
</div>
</body>
<style>
    #grid {
        height: 100px;
        display: grid;
        grid-template-areas: "a a";
        grid-gap: 10px;
        grid-auto-columns: 200px;
    }

    #grid > div {
        background-color: lime;
    }
</style>

在这里插入图片描述

9. 设置网格位置

  • grid-column-start、grid-column-end、grid-row-start、grid-row-end：设置网格的行列开始或结束在哪个位置。
  • 属性值：auto为自动放置，area-name 4 为该区域的第四行/列。
<body>
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
    <div class="box4">Four</div>
    <div class="box5">Five</div>
</div>
</body>
<style>
    .wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 100px;
    }

    .wrapper > div {
        border: 1px solid #000;
    }

    .box1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
    }

    .box2 {
        grid-column-start: 1;
        grid-row-start: 3;
        grid-row-end: 5;
    }
</style>

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

css

html

体验css：repeat和grid 的相关文章

  • 是否可以使“HTML 到语音”与“文本到语音”相同？

    我有一个奇怪的要求 在我现有的应用程序中我有Text2Speech为此 我使用了AVSpeechSynthesizer 到语音文本 但现在要求发生了变化 现在我需要将 HTML 文件数据转换为文本 例如HTML2Speech 我们可以想到的

  • 如何解决此错误：属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a

  • 如何保留用户的输入打印？

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div

  • 每 2 行后使 html 表格的边框变厚

    我创建了一个包含一些内容的表 其中有 12 行和 2 列 我想显示边框 但每 4 行之后 我想将水平边框设置为比正常情况更粗 怎么做 请在这里帮忙 试试这个选择器 table tr nth of type 4n td border bott

  • 古老的“字幕”标签的替代品？

    marquee 标签的标准等效项是什么 我正在寻找 HTML C asp NET 或 ASPX jquery java 脚本的解决方案 marquee 标签未包含在标准中 因为它是 视觉 标签 而不是 语义 标签 因此 您想要的任何语言都没

  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http

  • 如何使自定义 Web 组件可聚焦？

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信

  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么

  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo

  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga

  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none

  • Bootstrap：如何将按钮组对齐在中心（垂直）

    在下面的代码中

  • 如何使用javascript确保元素仅在圆上朝一个方向移动？

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394

  • 如何使用 Scrapy 从网站获取所有纯文本？

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext

  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其

  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小

  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent

  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo

  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee

  • Webpack 4：如何使用 LESS 获取 CSS 源映射？

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说

随机推荐

  • 函数式编程—柯里化

    纯函数的作用和优势 1 可以安心的编写和使用 2 写的时候保证了函数的纯度 只是单纯实现自己的业务逻辑即可 不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改 3 在用的时候 确定输入的内容不会被任意篡改 并且自己确定

  • 玩具蛇

    include

  • 数据库SQLite

    数据库SQLite 了解最轻巧的数据库SQLite SQLite 是一款轻型的数据库 占用资源非常低 它的源代码不受版权限制 能够支持Windows Linux Unix等等主流的操作系统 同时能够跟很多程序语言相结合 比如 Tcl C P

  • 29 KVM管理系统资源-调整虚拟CPU绑定关系

    文章目录 29 KVM管理系统资源 调整虚拟CPU绑定关系 29 1 概述 29 2 操作步骤 29 KVM管理系统资源 调整虚拟CPU绑定关系 29 1 概述 把虚拟机的vCPU绑定在物理CPU上 即vCPU只在绑定的物理CPU上调度 在

  • 2-问过 chatgpt 的问题（天马行空想问什么问什么）

    目录 一 信号序列中大部分为 0 时 FFT 运算复杂度的计算 1 当fft运算时 大部分信号点为0的情况下 对fft的运算时间会有影响吗 2 大部分信号点为0的情况下 fft的运算复杂度计算 3 这里的时间复杂度 O N log

  • HTML5语音合成功能

    这篇文章主要介绍了HTML5语音合成功能的实现代码 本文通过实例代码给大家介绍的非常详细 具有一定的参考借鉴价值 需要的朋友参考下吧 可将该代码复制到chrome控制台中体验 let msg new SpeechSynthesisUtter

  • this和super

    this this总是置于当前对象的成员类作区分 this是当前对象的引用 就是说当前用构造函数建的对象是谁 这个this就代表谁 它是一个引用 this 总是指向自己本事 super 子类在重写了父类的方法后 常常还需要使用到父类中被重写

  • do while循环语句的学习以及练习

    今天学的是do while循环语句 先执行循环体 直到条件的表达式为false 与while循环语句的区别 while语句先判断条件 满足时执行循环体 do while语句先执行循环体 满足条件在执行 语法 do 循环体 while 条件

  • kinova-jaco2使用Moveit!控制真实机械臂抓取固定点物体

    kinova jaco2使用Moveit 控制真实机械臂抓取固定点物体 一 机械臂坐标系 坐标系方向 位姿方向 轴的起始点 二 启动机械臂和Moveit 三 实现抓取 python代码 python文件建议直接用python启动 四 遇到的

  • react hook之useMemo

    useMemo的作用 Pass a create function and an array of dependencies useMemo will only recompute the memoized value when one o

  • LogisticRegression(逻辑回归)

    LogisticRegression定义 logistic回归 是一种广义的线性回归分析模型 常用于数据挖掘 疾病自动诊断 经济预测等领域 例如 探讨引发疾病的危险因素 并根据危险因素预测疾病发生的概率等 以胃癌病情分析为例 选择两组人群

  • SVG转为Png

    1 pom中引入maven依赖

  • 自定义实现OAuth2.0 授权码模式

    文章目录 OAuth2 0 授权码模式 实践 依赖知识 术语 授权码流程 认证服务器 拉起请求用户授权页面 用户手动授权 提交授权 生成code 下发Token 第三方应用 收到code并请求Token 访问受保护的资源 项目结构 Tomc

  • 类EMD的“信号分解方法”及MATLAB实现（第四篇）——VMD

    重头戏来了 在以往的应用经验里 VMD方法在众多模态分解方法中可以说是非常好的 从催更力度上看 这个方法也是格外受关注 笔者决定加快进度快一些写完这个方法 十月份了有些同学要开始做毕设 希望这篇文能帮上忙 1 VMD 变分模态分解 的概念

  • poj1338【丑数·DP】

    我记得这道题以前写过 而且是写出来了 DP吧 然后现在想了好久 没想出来 然后考虑一下递推 mdzz 直接就是让之前的这个每次乘以2 3 5就好了嘛 然后每轮取最小 include

  • jquery form表单.serialize()序列化后中文乱码问题原因及解决decodeURIComponent

    jquery form表单 serialize 序列化后中文乱码问题原因及解决 原因 serialize 自动调用了encodeURIComponent方法将数据编码了 解决方法 调用decodeURIComponent XXX true

  • 列表list转树形结构(python/golang/js/php)

    文章目录 1 原数据 2 利用对象内存共享生成嵌套结构 2 1 算法原理 2 2 算法实现 2 2 1 JS 2 2 2 Python 2 2 3 go 2 2 4 php 2 3 运行结果 3 递归 3 1 算法实现 3 1 1 pyth

  • 基于协同过滤算法的书籍推荐 毕业设计-附源码101555

    摘 要 21世纪的今天 随着社会的不断发展与进步 人们对于信息科学化的认识 已由低层次向高层次发展 由原来的感性认识向理性认识提高 管理工作的重要性已逐渐被人们所认识 科学化的管理 使信息存储达到准确 快速 完善 并能提高工作管理效率 促进

  • 微服务restful风格，用Post在服务之间发送请求接收不到参数接收不到问题（@RequestParam和@RequestBody）

    上代码 发送端 接收端 问题 发送端可以接受从前段传过来的数据 但是请求接收端时 接收端可以接收url请求 但是参数传不到接收端 分析 用get和post传输的数据是截然不同的 用get是追加在url之后 直接放在请求头 但是post请求的

  • 体验css：repeat和grid

    文章目录 一 repeat 1 语法 2 auto fill和auto fit 3 专属尺寸 fr auto max content min content 二 grid 1 设置grid布局 2 设置列宽行高 3 设置间距 4 设置分区

热门标签