返回顶部
分享到

CSS Grid 的 auto-fill 和 auto-fit 内容自适应

css 来源:互联网 作者:佚名 发布时间:2025-05-11 08:02:01 人浏览
摘要

CSS Grid 的 auto-fill 和 auto-fit 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /* 父元素 */ .grid { display: grid; /* 定义「网格容器」里有多少列,以及每列的宽度 */ /* repeat 是个「重复函数」,表示后面的模式会被重复多

CSS  Grid 的 auto-fill 和 auto-fit

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/* 父元素 */

.grid {

  display: grid;

  /* 定义「网格容器」里有多少列,以及每列的宽度 */

  /* repeat 是个「重复函数」,表示后面的模式会被重复多次 */

  /* auto-fit 是一个特殊值,自动根据容器宽度,能放下几个就放几个,每列都用后面的规则 */

  /* minmax 也是一个函数,每列最小 200px,最大可以占 1fr(剩余空间的平分) */

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

/* 子元素 */

.item {

  height: 200px;

  background-color: rgb(141, 141, 255);

  border-radius: 10px;

}

auto-fill 和 auto-fit 区别

auto-fill:尽可能多地填充列,即使没有内容也会“占位”;

auto-fit:自动适应内容,能合并多余空列,不占位;

auto-fill 和 auto-fit 适用场景

希望每行有多少内容就撑多宽,用 auto-fit;(如:卡片式布局、相册等)

希望固定列数,有占位,用auto-fill;(如:表格、日历等)


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • css中的overflow使用介绍
    title: overflow使用 date: 2025-05-07 19:41:52 tags: cssoverflow属性详解 overflow是 CSS 中控制内容溢出容器时如何显示的属性,它有以下主要功能: 1. 基本
  • CSS Grid 的 auto-fill 和 auto-fit 内容自适应
    CSS Grid 的 auto-fill 和 auto-fit 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /* 父元素 */ .grid { display: grid; /* 定义「网格容器」里有多少列,以及每列的宽度 */
  • 前端高级CSS用法介绍

    前端高级CSS用法介绍
    在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一。随着前端技术的不断
  • CSS去除a标签的下划线的几种方法
    在 CSS 中,去除a标签(超链接)的下划线主要有以下几种方法: 使用text-decoration属性 通用选择器设置:使用a标签选择器,将text-decoration属
  • CSS will-change属性介绍
    will-change 是一个 CSS 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化渲染性能,提前做一些准备工作,从
  • CSS Padding和Margin区别介绍

    CSS Padding和Margin区别介绍
    CSS Padding 和 Margin 全解析 CSS 中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域。理解这两个属性的区别和用
  • 前端CSS Grid 布局介绍
    CSS Grid 布局详解(通俗易懂版) 一、概述 CSS Grid 是一种二维布局系统,可以同时控制行和列,相比 Flex(一维布局),更适合用在整体页面
  • css中的vertical-align与line-height作用介绍
    一、vertical-align的作用与适用元素 1. 作用 vertical-align用于控制行内元素(inline)或表格单元格(table-cell)的垂直对齐方式。 不适用于块级元
  • CSS中z-index属性的作用及在什么情况下会失效
    大白话谈谈 CSS 中z - index属性的作用及在什么情况下会失效。 1. z-index 属性的作用 在 CSS 里,z-index属性就像是一个楼层控制器。想象一下网
  • CSS @media print使用
    @media print是 CSS 中的打印媒体查询,用于定义仅在打印文档时生效的样式规则。通过它,你可以优化网页的打印效果,比如隐藏不必要的元素
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计