开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

对某些列使用固定宽度的CSS网格

CSS网格布局是一种强大的二维布局系统，它允许开发者通过行和列来创建复杂的网页布局。当需要对某些列使用固定宽度时，可以通过CSS的grid-template-columns属性来实现。

基础概念

网格容器：应用了display: grid;或display: inline-grid;的元素。
网格项：网格容器内的直接子元素。
网格线：定义网格结构的垂直和水平线。
网格轨道：网格线之间的空间，即列和行。

相关优势

灵活性：可以轻松创建复杂的布局结构。
响应式设计：结合媒体查询，可以适应不同屏幕尺寸。
易于维护：布局代码更加直观，易于理解和修改。

类型

固定宽度网格：列宽是固定的像素值。
百分比宽度网格：列宽是相对于容器宽度的百分比。
自适应网格：列宽根据可用空间自动调整。

应用场景

仪表板设计：如数据分析、管理面板等。
电子商务网站：产品列表、购物车页面等。
新闻网站：文章列表、侧边栏导航等。

示例代码

假设我们有一个网格容器，其中前三列需要固定宽度，最后一列自适应剩余空间。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Fixed Width Columns</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 150px 1fr; /* 固定宽度列 + 自适应列 */
    gap: 10px; /* 列间距 */
  }
  .grid-item {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">Column 1</div>
  <div class="grid-item">Column 2</div>
  <div class="grid-item">Column 3</div>
  <div class="grid-item">Column 4 (Responsive)</div>
</div>

</body>
</html>

遇到的问题及解决方法

问题：固定宽度的列在不同屏幕尺寸下可能导致布局不美观。

原因：固定宽度不会随屏幕尺寸变化而调整。

解决方法：

使用媒体查询：根据不同的屏幕尺寸调整列宽。
使用媒体查询：根据不同的屏幕尺寸调整列宽。
使用minmax()函数：允许列宽在一定范围内自适应。
使用minmax()函数：允许列宽在一定范围内自适应。

通过这些方法，可以确保在不同设备上都能获得良好的用户体验。

相关搜索:使用CSS网格使多个不同宽度的列换行？CSS网格:仅折叠1列的宽度 CSS网格-具有自动宽度的自动列 gxt网格中的固定宽度如何为表格中的某些列设置固定宽度？无法设置固定列表中列的CSS宽度网格列的宽度 CSS网格布局使用类更改特定列的宽度 html/css网格匹配每列的内容宽度 css设置td的宽度固定 CSS网格溢出指定的宽度不使用固定宽度和高度的CSS圆使用CSS网格的父div的跨度宽度固定宽度的MySql CONCAT列 CSS中的可变“固定”宽度点？在CSS中,如何获得左侧固定宽度列,右侧表使用宽度的其余部分？具有固定侧边栏的CSS网格可以在CSS网格列中获取固定对象吗？定义列宽为最大屏幕宽度的css网格 CSS网格行具有不同的宽度

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

css左侧固定宽度，右侧自适应的几种实现方法

> 固定宽度区 2.固定宽度区使用绝对定位，自适应区照例设置margin 我们把sidebar...扔掉，只对content设置margin，那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说，我的宽度，与你无关。...我们来看看sidebar的特点：在右边，宽度300，他的定位对content不影响——很明显，一个绝对主义分子诞生了。...5.使用css3的calc计算元素宽度+浮动 calc()从字面我们可以把他理解为一个函数function。...前四种方法转载自老生长谈：css实现右侧固定宽度，左侧宽度自适应。这里主要是将各种方法进行汇总。我目前了解到的方法主要是这些，如果大家还有其他方法的请留言分享

2.7K2 0

不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱体验地址：体验为什么尽管一些网页设计工具为按钮等元素指定了 CSS 高度值，但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success...如果对影响元素计算高度和宽度的 CSS 属性使用固定值，当文字大小增大时，元素内部的文字会被截断。还不信服？你可能会想："但当我把浏览器放大到 200% 时，按钮文本看起来很好！"...这个标准也是为什么 CSS font-size 属性使用 rem单位，而 line-height 属性不使用单位的一个原因。在没有浏览器缩放等机制的情况下，文字大小必须可以调整到 200%。...演示 1 首先，我们看看在 font-size 、 height 、 line-height 和 width 使用固定值的情况下，当文字大小增大时会发生什么。在文字大小增大之前，按钮看起来很棒！...CSS 属性，如 max-width ，但我个人更倾向于使用尽可能少的 CSS 属性（以降低长期维护成本）。

1221 0

（译）一篇对css网格布局的介绍

css3 Grid Layout 表格布局是在css中强大的难以置信的布局模块。它是二维空间的，所以它可以处理行和列它有些类似于Flexbox，但是又有本质的差别。...然后这并没有改变子元素的显示方式，因为我们只创建了一列。这里我们需要创建网格轨道来创建更多的列。一个网格轨道是相邻网格线之间的空间，实质就是行或者列。在上图中，每一个列之间的每个空间就是轨道。...那如何定义宽度可变的表格呢？使用像素单位是没法做自适用的布局的其实我们有fr这个单位，fr代表网格容器中可用空间的一小部分。所以我们切换px到fr。...我们同样可以使用混合单位。我们可能想要一列宽度是固定的，其他两列宽度相等。...我们好像又回到了刚才的问题了，我们如何实现可变的布局呢？每一列宽度都是固定的200px，当没有足够空间留给下一个元素的时候，下一个元素会自动切换到下一行。但是我们想要的是布满剩下的空间。

3.4K3 0

【Web前端】CSS传统布局方法（补充）

三、创建简单的传统网格框架 3.1 固定宽度网格固定宽度网格是最简单的网格布局之一，它通常用于较小的网页或定宽设计中。...每一列都具有固定的宽度，并通过 margin 保持间距。 3.2 创建液态网格液态网格可以根据视口宽度自动调整列的宽度。通过使用 calc() 函数，可以轻松地进行计算。...calc() 函数来减去列之间的间距，使得列的宽度能根据视口的宽度自动调整，创造出更灵活的网格布局。...，有时需要某些列偏移一定的距离，以便实现更复杂的布局。...因为浮动元素的宽度通常是以固定值或百分比来定义的，所以当视口（viewport）宽度发生变化时，必须手动调整布局的CSS代码，这使得代码难以维护和扩展。

861 0

如何使用CSS中的固定定位属性？

摘要本文介绍了CSS中的固定定位属性（position: fixed）的使用方法和注意事项。固定定位属性可以将元素固定在浏览器窗口的特定位置，不随页面滚动而变动，常用于创建固定导航栏、页脚等。...本文将介绍固定定位属性的使用方法，并提供具体的代码示例。什么是固定定位属性？固定定位属性是CSS提供的一种布局方式，它使元素相对于浏览器窗口进行定位，与其它元素无关。...使用固定定位属性的基本语法要使用固定定位属性，首先需要为元素设置一个样式类或ID，然后在CSS样式表中定义这个类或ID的样式。...总结：本文介绍了CSS中固定定位属性的基本使用方法，并通过一个固定在页面顶部的导航栏示例，详细说明了固定定位属性的代码实现步骤。...使用固定定位属性可以为我们的网页和应用程序提供更好的布局效果，让用户体验更加友好和便捷。希望本文对你使用CSS中的固定定位属性有所帮助！

4661 0

简明 CSS Grid 布局教程

来自字节游戏中台 - 杨杰强同学的内部分享网格布局是由一系列水平及垂直的线构成的一种布局模式，使用网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一...1.1.2 重复设置列 / 行我们可以使用repeat函数来重复创建具有某些宽度配置的列。...某些情况下，我们需要给网格创建很多列来填满整个容器，而容器的宽度是可变的，也就没办法确定 repeat 的次数了，这时可以使用 repeat 函数中的关键字auto-fill来实现这个效果。...150px 的容器里，我定义了两列：100px 固定宽度和 1fr 铺满剩余空间。...其实不能...而如果给第二列加一个固定宽度，的确可以解决问题，但这就不是预期的 1fr 了。

2.9K2 0

深挖 Threads App 帖子布局，我进一步加深了对CSS网格布局的理解

这是带有和不带有padding-top处理的头像的前后外观：应用padding-top的另一个原因可能是将头像下移并使其更接近线条。对网格行使用奇数值奇数值作为网格行的高度是出于什么考虑？...使用固定大小行的限制由于前两行的固定宽度，无法向它们添加填充。然而，只要您意识到这个限制，就可以通过使用边距来解决。以下是一个例子：由于行大小固定，添加顶部和底部填充不会影响帖子标题。...布局列之间的空间感觉有点乱目前布局列之间的间隔为零。相反，图像的大小为36 * 36像素，而其容器的宽度为48像素。这样可以模拟这里的间距。...我不知道为什么团队会选择这种方法，但我更喜欢使用gap属性。为什么不使用命名的CSS网格区域呢？根据我目前观察到的情况，有三种网格布局变体，它们都可以受益于使用命名网格区域。...网格的内联CSS变量我很高兴看到像Threads这样的大型应用程序正在使用我和许多其他人提倡的东西。在用户个人资料中，选项卡网格布局是使用包含选项卡数的内联CSS变量构建的。很有用。

1782 0

CSS 新版网格布局简述

如果计算机的计算能力足够强大,是不是人这个东西也可以用物理量进行表示。网格布局 CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。...根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。...如图：然后我们对css规则做点改变，来了解网格是如何工作的。首先，将容器的display属性设置为grid来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。...重复构建行/列你可以使用repeat来重复构建具有某些宽度配置的某些列。举个例子，如果要创建多个等宽轨道，可以用下面的方法。...自动多列填充现在来试试把学到的关于网格的一切，包括repeat与minmax函数，组合起来，来实现一个非常有用的功能。某些情况下，我们需要让网格自动创建很多列来填满整个容器。

1.6K1 0

css grid 布局那些事儿

如今，设计师和开发人员正在使用各种布局系统，如 Flexbox 甚至纯 CSS 来创建令人惊叹的响应式网站。但是当涉及到某些任务时，这些方法中的每一种都有其自身的局限性。...在这种情况下，CSS Grid 可以派上用场！ CSS 网格架构有两种使用 CSS 网格布局的方法：隐式和显式。使用隐式网格，您只需定义所需的列数，浏览器将自动创建网格。...提供控制项目放置在网格区域内后如何对齐以及网格整体对齐方式的能力。提供使用像素创建使用固定轨道大小的网格的能力 - 将网格设置为适合您所需布局的指定像素。...网格父属性网格父元素是应用了 display: grid 属性的元素。它可以是任何类型的元素。网格父元素的属性： grid-template-columns：此属性定义列数和每列的宽度。...例如，以下代码将创建三列，第一列的宽度是第二列的两倍，第三列的宽度是第三列的三倍： .container { display: grid; grid-template-columns:

2.1K3 0

【Web前端】CSS 响应式设计（补充）

一、响应式设计之前的灵活布局在响应式设计流行之前，网页布局通常是固定的或流动的。固定布局使用固定的像素宽度，而流动布局使用相对单位（如百分比）来调整页面的宽度。...这些方法在移动设备上表现得并不理想，因为它们没有考虑到屏幕尺寸的多样性。 1.1 固定布局固定布局的网页使用像素作为宽度单位，这意味着无论屏幕宽度如何，网页的宽度都是固定的。...3.1 使用CSS网格布局 CSS网格布局是一种强大的布局工具，允许我们创建复杂的网格布局。通过定义网格的行和列，我们可以轻松地创建响应式布局。示例：基本的CSS网格布局 CSS网格布局创建了一个三列的网格，通过媒体查询，我们调整了网格的列数以适应不同的屏幕尺寸。...4.1 CSS多列布局 CSS多列布局允许我们将内容分成多列，以适应不同的屏幕宽度。示例：CSS多列布局 <!

1231 0

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

# Grid 布局 grid-template-columns 属性: 定义网格列的数量及宽度大小，建议使用 fr 单位来设置灵活网格，此单位代表网格容器中可用空间的一份(`1fr 1fr 1fr`...，可能会导致某些列保持为空。...7.其他传统布局（Other traditions）传统布局之固定宽度网格描述: 让我们先来创建一个固定列宽度的网格系统吧，目标是把它变成一个有两行十二列的演示网格，第一行均匀分布12元素的大小，第二行显示网格上不同大小的区域...方式1.固定公式为了达成这个目标，我们需要把相应的像素的长度变为百分比长度, 例如，我们把固定宽度转为伸缩的基于百分比宽度的算式在下面：target / context = result # 目标列长度是...温馨提示: 弹性盒设计上是一维, 它处理单个维度，行的或者列的; 我们不能创建一个对行列严格要求的网格，意即如果我们要在我们的网格上使用弹性盒的话，我们仍然需要计算浮动布局的百分比。

2842 0

BootStrap 前端框架简介

还是使用以前的固定单位去布局，会引发两个问题：（1）分辨率太大，网页两边留白太多（2）分辨率太小，页面显示不完全概念：设备无关性布局方式；在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的...Bootstrap4 网格系统规则: 网格每一行需要放在设置了.container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距...使用行样式row来创建水平的列组。内容需要放置在列中，并且只有列可以是行的直接子节点。预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。...这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。...Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。

1651 0

CSS Grid 那些鲜为人知的内幕

随着容器宽度发生变化，当容器宽度小到一定程度，即第一列的宽度小于图像的设定宽度时，就会发生如下的变化。基于百分比的列的宽度大小会按照容器宽度*N%变化，当列宽度小于图像宽度时，图像从列中溢出。...此时我们用gap来设置所有列和行之间添加了固定量的空间看看在%和fr之间切换时会发生什么：当使用基于%的列时，内容会溢出到网格父容器之外。这是因为%是使用总网格区域来计算的。...也就是说，当网格具有固定数量的行和列时，areas效果最佳。grid-column 和 grid-row 可以在隐式网格中很有用。...在这个示例中，我设置了一组按钮，并使用 Grid 对它们进行了排列：如果我们使用的是带有键盘的设备，可以通过点击左上角的第一个按钮（One），然后按 Tab 键逐个移动按钮。...只要网格容器大于 180px，就会有一些多余的空间：如果想利用多余空间进行对项目的排布处理，此时我们可以使用 justify-content 属性来控制列的分布，并且我们接受上面所列举的各种值。

1661 0

10分钟内就可以学会的几个CSS高招

中那样对框模型进行细分我还可以直接编辑它的属性，Firefox 会为我提供影响框模型的所有属性的细目分类。...Grid 允许你考虑大图布局，当你将元素设置为显示网格时，它对开发人员更加友好，你可以将其子项定义为一堆列和行。 ? 列的宽度可以用网格模板列属性定义，我们在这里有三个值： ?...由空格分隔，这意味着我们有三列注意 fr 值或小数单位将负责与网格中的其他列共享可用空间，我们还可以定义一些行，现在网格内的每个元素都将自动定位，但重要的是请注意，与 flexbox 布局或上帝禁止的表格布局相比...5、 Clamp it down 现在，当我们谈论响应式布局时，有 90% 的时间我们谈论的是根据设备或视口上的可用空间来更改某些内容的宽度。有很多方法可以做到。...例如，你可能有一篇文章的首选宽度为 50%，但在小屏幕上，你希望将其固定为 200 像素或在大屏幕上固定为 800 像素，你可以通过编写将有条件地应用 CSS 的媒体查询来实现基于视口大小，唯一的问题是媒体查询会让你想要随着项目的增长而离开自己

1.4K2 0

CSS进阶12-网格布局 Grid Layout

翻译过来就是，这个CSS模块定义了一个二维的基于网格的布局系统，为用户界面设计进行了优化。在网格布局模型中，网格容器的子节点可以定位到预定义的可伸缩的或者固定大小的布局网格中的任意插槽中。 2....作为替代方案，许多Web应用程序的作者选择固定布局，无法利用屏幕上可用渲染空间的更改。网格布局的能力解决了这些问题。它为作者提供了一种机制，使用一组可预测的大小调整行为将可用空间分配给列和行。...浏览器的兼容性 CSS网格布局从Safari 10.1, Firefox 52, Opera 44, Chrome 57开始受到支持，微软Edge在Edge 15会更新对网格布局的支持。...每个网格轨道可以设置一个大小，用来控制宽度或高度或者行可能会增长。网格单元是网格行和网格列的交集。它是定位网格项时可以引用的网格的最小单元。在接下来的例中定义了一个三行两列的网格。...第一列设置一个固定宽度“150px”，第二列设置是一个弹性尺寸，它是一个未赋值的网格空间，从而根据网格容器的变化而进行宽度的改变。如果网格容器的宽度是“200px”，那么第二列的宽度是“50px”。

6K2 0

「Shiny」应用程序布局指南

固定网格系统固定网格系统也使用12列，并在默认情况下保持940像素的固定宽度。...固定网格的主要好处是，它提供了更强的保证，让用户能够看到UI布局的各种元素（这是因为它不是根据浏览器的宽度动态布局的）。它的主要缺点是使用起来有点复杂。...一般来说，我们建议使用 fluid 网格，除非您绝对需要由固定网格提供的低层布局控制。使用固定网格在 Shiny 中使用固定网格与 fluid 网格的效果几乎相同。...(10, "main" ) ) ) 列嵌套在固定网格中，每个嵌套列的宽度必须与其父列的数量相加。...，即使页面使用固定的网格布局，fluid 列宽也会自动使用。

7.1K3 2

GRID布局

基础通过指定display: grid;指定容器使用Grid布局，Grid布局中采用网格布局的区域，称为容器，容器内部采用网格定位的子元素，称为成员。...，grid-template-columns属性定义每一列的列宽，设定为多少列就设置多少个值，取值可以为固定像素，也可以为百分比 0 列容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充，当容器不足容纳成员时会自适应换行。...如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。...这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

1.3K2 0

如何使用Grid中的repeat函数

现在列的宽度是固定的，即使容器太窄也不会改变。...auto-fit 和弹性单位不能一起使用，因为我们需要在其中某个地方使用固定的测量值，例如 minmax(100px, 1fr)。...例如，我们可以使用 minmax(50px, max-content)，但不能使用 minmax(min-content, max-content)（不过老实说，我发现这些组合中的某些似乎确实有效）。...总结 repeat() 函数是一种非常有用的工具，可用于高效布局网格列和行的重复模式。只需一行代码，它就能在不使用媒体查询的情况下创建完全响应式的布局。...本文译自：https://www.sitepoint.com/css-grid-repeat-function/ 以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~ 参考资料 [1] 命名线

5713 0

万字总结 CSS 布局

像上面这样使用overflow一般情况下是有效的。然而，在某些情况下，这可能会带来一些阴影的截断或是非预期的滚动条。...网格布局 5.1 Grid 布局是什么网格是一组相交的水平线和垂直线，它定义了网格的列和行。CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。...「（2）auto-fill 关键字」有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。...grid-template-columns: 100px auto 100px; 上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度...如果某些区域不需要利用，则使用"点"（.）表示。

5.7K2 0

CSS进阶11-表格table

在这种情况下，开发者不应该在文档语言中使用与表格相关的元素，而应该将CSS应用于相关的结构元素以实现所需的布局。开发者可以将表格的视觉格式指定为矩形网格单元格。单元格的行和列可以组织成行组和列组。...第三条规则使“totals”列变为蓝色，最后两条规则通过使用固定布局算法fixed layout algorithm显示如何使列成为固定大小。...这些框的视觉布局是由一个矩形的、不规则的行和列网格控制的。每个盒子占据了整个网格单元的数量，根据下面的规则来确定。这些规则不适用于HTML 4或早期的HTML版本；HTML对行和列跨度有自己的限制。...5.2.1 固定表格布局fixed table layout 使用这种（快速）算法，表的水平布局不依赖于单元格内容; 它仅取决于表格的宽度，列的宽度以及borders或者单元格间距cell spacing...对自动表格布局的输入只能包含包含块的宽度以及表格及其任何后代的内容和其上设置的任何CSS属性。本节其余内容是非规范性的。该算法可能导致效率低下。

6.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭