CSS网格使用min-content作为1 fr单元的基础

CSS网格是一种用于布局网页元素的技术，它可以将页面划分为行和列，并将元素放置在这些行和列的交叉点上。在CSS网格中，我们可以使用fr单位来定义网格的大小，其中fr表示可用空间的一部分。

在CSS网格中，可以使用min-content作为1fr单元的基础。min-content是一个自动计算的值，它会根据元素的内容来确定网格单元的大小。具体来说，min-content会根据元素内部的内容来计算出一个最小的宽度或高度，然后将其作为网格单元的大小。

使用min-content作为1fr单元的基础有以下优势：

自适应性：min-content会根据元素的内容自动调整网格单元的大小，使得网格布局更加灵活和自适应。
内容控制：通过使用min-content，我们可以确保网格单元的大小始终适应元素的内容，避免内容溢出或过度空白的问题。
响应式设计：使用min-content可以实现响应式设计，使得网格布局能够根据不同的屏幕尺寸和设备自动调整。

应用场景：

响应式布局：使用min-content可以实现响应式的网格布局，使得页面在不同的屏幕尺寸上都能够良好地展示。
图片网格：通过将图片放置在使用min-content作为1fr单元的网格中，可以实现一个自适应的图片网格布局。
博客布局：使用min-content可以实现一个自适应的博客布局，使得文章内容能够根据不同的屏幕尺寸自动调整。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps

请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行评估和决策。

相关·内容

如何使用Grid中的repeat函数

例如，请看下面这段有六列网格的超长代码： article { grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; } 可以使用repeat()这么改写：...min-content); } image.png 使用max-content关键字 max-content 关键字的作用基本上与 min-content 相反：它根据网格单元格中最大的内容来确定轨道大小...在下面的演示中，列宽以内容最多的单元格为基础： article { grid-template-columns: repeat(3, max-content); } image.png 使用auto...不过，最好至少为一个参数使用长度值，因为关键字不应该同时作为两个参数工作（不过我发现有时确实可以这样做，例如 minmax(min-content,max-content)）。...使用auto-fit和minmax() 请看下列CSS： article { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

5503 0

全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)

现在我们在此基础上继续深入学习CSS布局，它是学习CSS之路上一个重点，是在进行前端开发时常常使用到的，所以说我们需要认真学习，若有不懂的地方可以在文章末尾，以及作者交流群【在公众号回复微信交流群】进行留言交流...# Grid 布局 grid-template-columns 属性: 定义网格列的数量及宽度大小，建议使用 fr 单位来设置灵活网格，此单位代表网格容器中可用空间的一份(`1fr 1fr 1fr`...总之，当你使用 css 创建一个布局时，此时默认的正常布局流将会被改变，通常使用 display、float、position 、表格、多列布局样式设置会覆盖默认的布局, 这些我们在上一章【5.CSS基础知识之定位浮动学习笔记...属性: 定义网格列的数量及宽度大小，建议使用 fr 单位来设置灵活网格，此单位代表网格容器中可用空间的一份(1fr 1fr 1fr = repeat(3, 1fr);=>表明了后续列宽的配置要重复多少次...: 1fr 3fr 1fr; /* 使用区域模板进行定义,空白区域使用 .

5612 0

CSS 中的 Grid 布局完全指南

网格线（Grid Lines）使用Grid布局在显式网格中定义轨道的同时会创建网格线。网格线可以用它们的编号来寻址。在从左到右的语言中，列线1将位于网格的左侧，行线1将位于其顶部。...网络单元格（Grid Cell）在Grid布局中，网络单元格是 CSS 网格中的最小单元。它是四条网格线之间的空间，非常像表格单元格。...1fr 1fr; grid-template-rows: 100px 100px; } Grid 中可以使用的函数在 Grid 布局中我们还可以使用如下 3 个函数 repeat() repeat...比如上面grid-template-columns: 1fr 1fr 1fr;我们可以写成repeat(3, 1fr)。它的第一个参数是重复的次数，而可以为auto-fill和auto-fit。...它的值可以分三种情况： none 只有定义行和列时可以使用rows/columns语法，如grid-template: 100px 1fr / 50px 1fr; 当三个都有时，也用一个/分隔，而且它的右边也还是

3.7K2 0

GRID布局

基础通过指定display: grid;指定容器使用Grid布局，Grid布局中采用网格布局的区域，称为容器，容器内部采用网格定位的子元素，称为成员。...划分网格的线就称为网格线，正常情况下n行有n + 1根水平网格线，m列有m + 1根垂直网格线。...如果希望每一行或每一列容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充，当容器不足容纳成员时会自适应换行。...如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。...: 1fr 2fr 3fr; } minmax minmax()函数产生一个长度范围，表示长度就在这个范围之中。

1.3K2 0

css3中的grid布局

1.今天仔细看了一下grid布局，这个妖孽属性，类似栅格布局。是flex布局的升级版本。 display:flex;本身就已经可以在移动端横行了。但是grid会让移动端布局更加灵活好用。...将容器进行行内布局，该布局需要注意 · 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align...不得不设置的属性grid-template-columns（定义列宽），grid-template-rows（定义行高）这个属性是grid的核心 grid-template-columns: 1fr...1fr minmax(1fr, 200px); css会提示报错。...> | | min-content | max-content | auto ] )

6242 0

二维布局：Grid Layout

您可以通过将规则应用到父元素来使用 Grid Layout。简介 CSS Grid Layout，旨在完全改变我们处理网格的方式，它是二维表格系统。CSS 经常被用来布局，即使它表现得不是很出色。...跟 Flexbox 相似，网格项的顺序无关紧要。您的 CSS 可以将它们任意排序，使用媒体查询来重排布局也非常容易。...在此示例中， fr 单元可用的总可用空间量不包括50px： .container { grid-template-columns: 1fr 50px 1fr 1fr; } grid-template-areas...方法和关键字当设置行、列尺寸时，除了可以使用熟悉的长度单位，例如 px、 rem、 %等，你还可以使用 min-content、 max-content、 auto关键字，但最有用的是 fr 单位。...grid-template-columns:200px 1fr 2fr min-content; 您还通过方法去设置弹性单位（ fr）的边界。

4.3K2 0

一个侧边栏导航组件实现思路

构建一个响应式导航系统是很困难的。有些用户使用键盘，有些用户使用强大的台式机，还有一些用户使用小型移动设备访问。每个访问者都应该能够打开和关闭菜单。 ?...不过，使用网格区域语法，可以为同一行或列分配多个元素。 Stacks 主要的布局元素 #sidenav-container 是一个网格，它创建了 1 行和 2 列，其中 1 列被命名为 stack。...当空间受到限制时，CSS 会将所有元素的子元素赋给同一个网格名称，将所有元素放在同一个空间中，创建一个堆栈。...#sidenav-container { display: grid; grid: [stack] 1fr / min-content [stack] 1fr; min-height...#sidenav-open { display: grid; grid-template-columns: [nav] 2fr [escape] 1fr; } 调整 2fr 和 1fr

3.6K4 0

CSS Grid 那些鲜为人知的内幕

网格单元网格单元是两个相邻的行网格线和两个相邻的列网格线之间的空间。它是网格的单个「单位」。在这个例子中，这是位于行网格线 1 和 2 之间，以及列网格线 2 和 3 之间的网格单元。...❞ 一个网格区域可能由「任意数量的网格单元组成」。在这个例子中，这是位于行网格线 1 和 3 之间，以及列网格线 1 和 3 之间的网格区域。...此外，我们还可以使用新的单位，即fr单位[8]：这里多说一句，在CSS Values and Units Module Level 4[9]中定义了关于length的值这里的fr代表分数(fraction...我们可以将其构建为一个7列的网格，每列占据1个单位的空间： .calendar { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr...1fr 1fr; } 上面方式肯定是有效可行的，但是我们不想重复写1fr多次。

1551 0

【CSS】343- CSS Grid 网格布局入门

它还能使我们在不改变任何HTML的情况下，使用 CSS 来定位和调整网格内的每个元素。它允许 HTML 纯粹作为内容的容器。...CSS 代码： .game-board { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } 看，只需使用...网格线编号,网格单元格，网格轨道网格线是存在于列和行每一侧的线。一组垂直线将空间垂直划分成列，而另一组水平线将空间水平划分成行。...网格单元格很像表格单元，是两条相邻垂直线和两条相邻水平线之间的空间。这是网格中最小的单位。定位网格项我采取了前面的例子的网格，并用数字从1到9标记每个单元格，而不是X或O，下面是它的样子： ?...我们还学习了如何使用网格线和网格命名区域在网格容器内定位网格项目。但这只是一个开始。在下一个教程中，我们将深入到CSS网格。

1.9K1 0

Grid布局简介

网格单元格（grid-cell）网格单元格就是网格容器中划分出来最小的单元。 ?...网格轨道（grid-track）网格轨道就是由若干个网格单元格组成的横向或者纵向区域，他的常见规格是1x8，或者8x1这种格式。 ?...fr单位 fr单位是grid布局中的一个新单位，它代表的是网格容器中可用空间的一份。下面我举三个小例子来介绍以下这个单位，注意，我们这里只关注列的宽度。 1fr 1fr 1fr表示三个轨道三等分。...1fr 2fr 1fr 2fr 1fr 2fr minmax(min, max)，可用给网格定义一个尺寸的范围，第一个参数min表示网格尺寸的最小值，第二个参数表示网格尺寸的最大值。...网格项目属性网格项目属性，是添加在具体的网格单元上来控制网格单元的属性。

7.4K8 0

grid布局—让css变得更简单

四、CSS 网格单位在 CSS 网格中，可以使用绝对定位和相对定位单位如px和em来确定行或列的大小。...十一、 justify-self 水平对齐在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。...你可以使用网格项的justify-self属性，设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下，这个属性的值是stretch，这将使内容占满整个单元格的宽度。...该 CSS 网格属性也可以使用其他的值： start：使内容在单元格左侧对齐， center：使内容在单元格居中对齐， end：使内容在单元格右侧对齐....使用示例：在类为container2的网格中，用auto-fit和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr。

5.3K2 0

逐步替换Scss

翻译说明这是一篇介绍现代 css 核心特性的文章，并且借助 sass 进行横向对比，充分体现了 css 作为一门设计语言的快速发展以及新特性为我们开发者带来的强大生产力。...使用 sass 我一直记得我第一次尝试用 css 创建一个响应式网格布局的时候，那要为每列创建一个对应的类名，然后再用语义化不强的类名（比如 col-span-1 和 col-span-4 ）来标记它...CSS 通过 css 的 grid 的介绍，我们不再需要用语义化不强的类名或者 sass 或者其他预处理器，来完成网格布局这项功能。....project { display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); grid-gap...: 1em; } 从 sass 创建网格布局转变为 css 原生网格布局，是一个“无痛”体验。

1.2K3 0

最强大的 CSS 布局 —— Grid 布局

号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址[1] ?...Grid 布局 Grid 的一些基础概念我们使用 Grid 实现一个小例子，演示 Grid 的一些基础概念，演示地址[2] <div class="...行和列 网格单元：一个网格单元是在一个网格元素中最小的单位，从概念上来讲其实它和表格的一个单元格很像。...image 参考常见的 Grid 布局用例[19] CSS Grid 网格布局教程[20] Grid 布局草案[21] 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局[22]...] Grid 布局草案: https://drafts.csswg.org/css-grid/#intro [22] 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局: https

4.2K2 0

grid网格布局

1fr 1fr 1fr; 这样就代表一行三个格子，当然你可以写四个五个六七个，这里的fr就是一个单位（弹性尺寸使用fr尺寸单位，其来自 “fraction” 或 “fractional unit” 单词的前两个字母...使用：任何容器（行内元素可设置为display:inline-block）; 特点：空间分布在行中进行，而非整体 Grid Gird Layout(css网格布局)是css中最强大的布局系统，是一个二维系统...，可以同时处理行和列，可以通过将css规则用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。...grid-auto-columns: 隐式网格的宽度兼容性作为前端，我们逃不掉的一个问题就是兼容性问题了，看似强大的grid布局为什么在日常中使用的却不多呢，那就是因为目前的grid布局还不够普及导致兼容性还较差...，在低版本的浏览器是无法使用的，但是前段技术进步很快，更新很快，相信在移动端目前grid布局已经支持性很高了，在目前互联网飞速发展的时代，我认为，作为目前最强大的css布局方案，grid终究会是前端布局的一个主流方向

1.9K4 0

前端-CSS Grid中的陷阱和绊脚石

DEMO1：https://codepen.io/airen/pen/mxOdYE 第二个示例使用CSS Grid实现相同的布局，但是，你可以看到，最后一行中的项目始终保持在它们的列中。...这里要记住的关键是，一个单元格大小的改变将会改变整个轨道的大小。如果你不希望这种情况发生，你可能需要一个单一维度的Flexbox布局。...例如min-content关键词的示例，使用它创建一个网格轨道时，将会创建尽可能小的网格轨道。在我的例子中，这个词意味着其成为最宽的东西，网格轨首缩小以适应它。 ...由于浮动和基于Flexbox的网格的限制，我们需要变得擅长计算百分比来做布局，所以大多数人做的第一件事就是尝试在他们的网格布局中使用相同的方法。然而，在这样做之前不要忘记我们有一个新单位fr。...你可能选择使用百分比的原因是你需要一个网格布局，以便与其他元素匹配使用其他布局方法，并依赖于百分比大小。然而，如果不是这样的话，看看fr单位是否能满足你的需求，然后对其进行计算。

4.8K2 0

【CSS】最强大的布局之grid布局精讲

往期文章【css高级】变量详解轮播图swiper框架的基本使用【Transform3D】转换详解（看完就会）【css动画】移动的小车【CSS3】 float浮动与position定位常见问题（...看这个就够了详解 CSS3中最好用的布局方式——flex弹性布局（看完就会） [前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（...它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 Grid 布局则是将容器划分成 “行” 和 “列” 产生单元格，然后指定 “项目所在” 的单元格，可以看作是二维布局。...单元格每行每列都会分布单元格，在单元格内我们可以添加想要的内容。网格线格子的边框为网格线，分为上下网格线和左右网格线。...对于这个属性我们还可以使用span关键字，他表示跨越的网格数量，而不是线的数量。

2.8K2 1

CSS Grid 布局不好理解？可借助 CSS Grid Generator 快速上手并掌握 Grid 布局！

CSS Grid 布局示例当我正在学习一些东西时，我发现最好的学习方法是使用现有的工具构建实用的东西。...在本文中，咱们先从一个简单的布局开始，然后使用CSS Grid Generator创建在实际项目中使用所需的代码。首先从一个典型的布局开始，如下所示： ?...新的fr单元表示网格容器中可用空间的一小部分。第二行的1fr会告诉区域占用剩余的可用空间。如果将容器设置为100vh，就会占据整个页面的内容，列也是如此。...点击“请给我示例中的代码”就可以查看对应布局生成的 CSS 代码： .parent { display: grid; grid-template-columns: 200px 1fr 1fr 200px...网格单元(Grid Cell) 加餐两个相邻的列网络线和两个相邻的行网络线组成的就是网络单元，如下面的深橘色背景就是网络单元。 ?

2.9K2 0

使用 CSS Grid Generator来快速使用及学习 Grid 布局

第一次进入是界面是这样子的： image.png CSS Grid 布局示例当我正在学习一些东西时，我发现最好的学习方法是使用现有的工具构建实用的东西。...在本文中，咱们先从一个简单的布局开始，然后使用CSS Grid Generator创建在实际项目中使用所需的代码。...咱们希望Footer跨越整个网格，侧边栏占用一个单元格，主内容区域跨越2列，Footer 跨越4列,最终效果，如下： image.png 这看起来有点像咱们想要的布局，但仍然需要定义一些具体的尺寸。...Grid还引入了一个额外的长度单位，以帮助各位创建灵活的Grid轨道。新的fr单元表示网格容器中可用空间的一小部分。第二行的1fr会告诉区域占用剩余的可用空间。...网格单元(Grid Cell) 加餐两个相邻的列网络线和两个相邻的行网络线组成的就是网络单元，如下面的深橘色背景就是网络单元。 ?

1.1K2 0

vite入如何引入Tailwindcss

简介 tailwindcss[1]是一个CSS框架。...： // tailwindcss import '/@/style/index.css'; 至此，我们就成功的引入了tailwindcss。...', min: 'min-content', max: 'max-content', fr: 'minmax(0, 1fr)', }, gridColumn...minmax(0, 1fr))', 3: 'repeat(3, minmax(0, 1fr))', 4: 'repeat(4, minmax(0, 1fr))', 5...: 'repeat(5, minmax(0, 1fr))', 6: 'repeat(6, minmax(0, 1fr))', 7: 'repeat(7, minmax(0, 1fr

2.3K2 0

开发人员必备：9个令人惊叹的CSS网格生成器推荐！

此外，还可以按照指定的行或列结构排列元素。它有一个非常易于理解的用户界面，在其中你可以通过容器中的“+”和“-”按钮添加行和列。还可以通过添加多个网格单元来扩展网格项。...此外，它还允许我们在这些网格项之间插入间隙。此外，为了让网格具有响应性，可以在 grid-template 中使用fr、%和 auto 单位。...每行和每列都有一个单位方框，因此我们可以以 px、fr 和 % 的方式更改行和列的大小。这有助于我们创建响应式布局和网格。...因此，你需要选择第一个网格项，并以1开始列，以行数+1结束，即n+1（5+1=6）。所以，你可以通过编辑每个网格项来使用右侧面板来扩展行和列。最后，中心面板是网格显示面板。...总结以上是一些流行的CSS Grid生成器，你在将来可以考虑使用它们来塑造你的网站。毫无疑问，使用CSS Grid生成器，我们将能够创建响应式布局，并为我们的网站设计打下绝对的基础。

3.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云