如何调整网格中第一个自动列的大小？
调整网格中第一个自动列的大小可以通过设置网格布局的grid-template-columns属性来实现。该属性用于定义网格的列大小。
首先，需要确定网格布局的列数。假设网格有3列，其中第一个列是自动列，可以根据内容的大小自动调整。
然后，在CSS中使用grid-template-columns属性来定义网格的列大小。可以使用以下几种方式来调整第一个自动列的大小：
- 使用固定大小的列：可以通过指定具体的像素值或百分比来设置第一个自动列的大小。例如，
grid-template-columns: 200px auto auto;表示第一个列宽度为200像素，其余两列自动调整。 - 使用
minmax函数：minmax函数可以设置一个范围，让列的大小在这个范围内自动调整。例如，grid-template-columns: minmax(200px, auto) auto auto;表示第一个列的宽度至少为200像素，但可以根据内容自动调整。 - 使用
fr单位：fr单位可以根据可用空间的比例来分配列的大小。例如，grid-template-columns: 1fr auto auto;表示第一个列占据可用空间的1/3，其余两列自动调整。
以上是调整网格中第一个自动列大小的几种常见方法。具体选择哪种方法取决于实际需求和布局设计。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
相关·内容
3回答
css网格随fr增长超过100%的宽度，但不随极小的增加而增长。
html、css、css-grid
.small-container { width: 200px; }
.small-container > div { margin: 16px; }
.border { box-shadow: 0 0 2px 2px black; }
.break-long-text {
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.grid-fr {
display: grid;
grid-template-columns: 1fr;
}
.grid-minmax
浏览 0提问于2018-07-09得票数 14
回答已采纳
1回答
CSS网格:在使用网格-列-开始/结束时，自动安装的行为就像自动填充
css、grid、css-grid
当涉及到CSS网格时，我遇到了一些困惑。我的网格模板列设置为自动安装，这是非常好的工作。除了在div5上设置列开始/结束之外，我开始获得自动填充行为，而不是创建多个空白单元格。似乎我的minmax函数的最大1fr没有完成它的工作。
我是不是漏掉了什么明显的东西？
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
#div5 {
grid-column-start: 1;
grid-column-end: -1;
}
下面的图像显示了窗口大小的增加/减小，显示
浏览 0提问于2018-06-05得票数 12
回答已采纳
1回答
CSS网格-列的规则必须尽可能窄但最大宽度为50%
css、css-grid
我有一个非常简单的网格，有两列。左边的列是图片，右边的列是一些文本。
我希望左列调整到图片的宽度(因此，列必须尽可能窄，只要图片适合)。但是我也希望这个专栏能占到网格宽度的50%。
我试了几件事，比如：
display: grid;
grid-template-columns: minmax(auto, 50%) 1fr;
但这是行不通的:左栏总是占50%，即使有一张小照片！
那么，如果图片较小，我如何告诉它要采取较小的宽度？
(请注意图片的宽度为max-width: 100%)
浏览 1提问于2020-06-03得票数 3
回答已采纳
4回答
利用腾讯云GPU构建深度学习网络？
对象存储、深度学习
如题，本人（学生）想用腾讯云构建一个实验性的深度学习网络，具体要用到腾讯云的哪些服务呢？（GPU，COS），另外还需考虑较低的成本。。。
浏览 1132提问于2017-12-13
1回答
我不知道为什么我的标题和描述之间有这么大的差距。
html、css
我是新手的CSS网格和编码一般tbh。我正在尝试为我的网站制作一个商店页面，我不明白为什么我的标题和div中带有" title -container“类的描述之间有如此大的差距。
提前感谢你的帮助，
.container {
display: grid;
grid-template-rows: minmax(1000px, auto);
grid-template-columns: 1fr 4fr;
background-color: red;
}
.sidebar {
background-color: blue;
}
.product-side {
浏览 0提问于2020-07-14得票数 0
1回答
什么是自动安装在网格-风暴-列？
html、css
我正在练习CSS中的网格布局。我已经研究过这个语法：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));任何人都可以描述我用来创建响应网格的这一行。
浏览 1提问于2021-09-05得票数 0
回答已采纳
3回答
点开磁盘管理后没有磁盘1只有磁盘0？
云服务器、官方文档
请描述您的问题
标题：快速入门 Windows 云服务器 - 云服务器 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/213/2764
浏览 1753提问于2018-01-31
1回答
具有最少的列和行以适应屏幕的CSS网格
html、css、responsive-design、css-grid
我希望我的网格响应视图的大小和项目的数量。它应该使用浏览器窗口中可以容纳的最少的列和行来展开项目(100vh 100vw)。 目前，我在css网格中使用了以下内容： |-------| |-----------| |--------------------| |--------------------| |--------------------|
| [] [] | |[] [] [] []| |[] [] [] [] [] [] []| |[] [] [] [] [] [] []| |[] [] [] [] [] [] []|
| [] [] | |
浏览 7提问于2020-09-15得票数 0
1回答
响应式网格(网格-模板-列)
css、flexbox、responsive-design、grid、media-queries
你好，我正在习惯css中的网格，我已经使用了
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
很多时候，但是如果我想让内部的div以特定的宽度开始呢？我有这样的东西
<div class="wrapper">
<div class="right-content">
</div>
<div class="left-content">
</div>
&l
浏览 0提问于2020-10-10得票数 0
4回答
怎么买云服务器？
云服务器、5折上云
请描述您的问题
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=cdb&utm_campaign=firstpurchase&utm_term=0110
浏览器信息
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 483提问于2018-03-12
1回答
如何强制使用网格模板列的css网格:重复(自动匹配，minmax(x，y))在每一行上尽可能平等地分配项目？
html、css、css-grid
我正在构建一个css网格。css看起来像：
div.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
而html只有6个条目：
<div class=stats>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
浏览 4提问于2022-10-28得票数 0
1回答
如何用CSS网格保证中间列的对中？
html、css、flexbox、css-grid
我有三个列；中间有一个主列，两边各有两个。两侧列的宽度根据其内容而变化，其中一列甚至可能是空的。我希望中间列的内容能够增长，同时保持两侧列的宽度。
，下面是我尝试的一个片段：
.row {
width: 100%;
display: grid;
align-items: center;
justify-items: space-between;
grid-template-columns: 1fr auto 1fr;
gap: 16px;
}
.row > * {
background-color: #ccccff;
height: 40px;
}
.m
浏览 6提问于2021-08-17得票数 0
2回答
React :如何使css网格列自动包装到下一行
css、node.js、reactjs、material-ui
我有一个css网格。它包含一个动态的元素数。就像这样：
<Box className={classes.Grid}>
<Button variant="outlined">1</Button>
<Button variant="outlined">2</Button>
<Button variant="outlined">3</Button>
浏览 9提问于2022-01-16得票数 0
2回答
网格模板-在最大和最小像素大小之间收缩和增长的列
css、grid
我希望网格列至少为200 of，最大为300 of。我正在尝试，但列总是300‘m。
grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
我可以制作像这样收缩的列：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
但后来它们变得太大了。
我已经检查了，没有看到一个适用的例子。
有办法解决这个问题吗？
请参阅
答案
答案的重要元素包括更改为：minmax(300px, auto));以及添加box-sizing: border-box;
没有这些，当
浏览 7提问于2022-08-24得票数 0
回答已采纳
1回答
在重复()函数中使用自动填充值在Firefox中不起作用吗？
css、css-grid
我在努力学习css-网格布局。我打开了Chrome、FireFox和FireFox开发人员的网格标志。我也下载了FireFox每晚(截至今天52.0a1 (2016-11-07) (64位))。我在苹果电脑上。
我的计划是，我希望使用auto-fill特性来确保偶数列。所以我做了这个：
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 2.5vw 2.5vw);
}
在Chrome中，这是可行的，但在所有FF中，我在调试器中看到了一个invalid property value错误。
在第三个例子中
浏览 7提问于2016-11-08得票数 1
回答已采纳
1回答
CSS网格中固定长度和重复()的混合
html、css、css-grid
我试着用网格布局来制作日历。一周中的每一天都会有一个标题。我的目标是将标题的高度(即:网格中的第一行)设置为30 in，并将其余的行分隔其余可用空间。
我的日历CSS如下所示：
.calendar{
display:grid;
grid-template-columns:repeat(1,1fr);
grid-template-rows:30px repeat(auto-fill,1fr);
}
现在，我认为这完全可以做我想做的事情，但是30px没有作用，每一行都是一个相等的高度。是否可以将静态值与repeat()混合
我意识到我可以做两个网格-一个为标题，一个为天-但
浏览 0提问于2019-01-08得票数 8
回答已采纳
1回答
在CSS中，为什么1FR+9FR在小屏幕上的表现不与10 as相同？
css、css-grid
因此，我在CSS中定义了一个布局，它需要这个特定的行具有相同大小的输入。我可以进行计算，只需指定百分比，它就能正常工作(请参阅注释行)，但是当我通过小数单位(fr)指定它时，跨列“压缩”比非跨列“压缩”得多。
.A {
grid-area: a;
}
.B {
grid-area: b;
}
.C {
grid-area: c;
}
.Exchange_Row {
display: grid;
grid-template-columns: 1fr 9fr 10fr 10fr 1fr;
/*
grid-template-columns: 3% 27% 3
浏览 0提问于2019-01-10得票数 5
回答已采纳
2回答
CSS网格固定响应列
css、css-grid
我有一个有以下响应的网格：
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px 10px;
如何将最大列数设置为4列，同时保持响应性？也就是说，当调整页面的大小时，行应该像示例中那样折叠为一列，但最大大小为四列。
所以,
repeat(4, 1fr);
都不管用。
我要用柔软盒吗？我已经看到了相关的答案，但似乎没有人能清楚地解释它。
工作示例。
浏览 0提问于2018-05-07得票数 2
回答已采纳
1回答
如何使用css网格重新创建浮点布局？
css、css-float、css-grid
我有一个布局，左边有一个图像，右边有一些文本内容。其内容如下：
.left {
max-width: calc(100% - 150px);
float: left;
}
img {
width: 300px;
max-width: 100%;
}
<div class="wrapper">
<div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
<div class=&#
浏览 0提问于2018-09-12得票数 0
回答已采纳
2回答
如何创建具有网格的页面布局，其中外部列作为自动“边距”？
css、layout、css-grid
我希望在一个页面上使用css网格布局。并且需要一种方法来添加最大宽度到2列。
我需要使用4列，其中内部2有一个最大宽度和两个外部的，以自动缩放取决于浏览器窗口。然后我需要一个子元素来跨越第3列和第4列。
请参考下面的示例：
我尝试过以下几种方法：
grid-template-columns: auto 800px 800px auto;
但是"Auto“列的大小不同，整个网格都被推到了左边。
我还尝试使用：
grid-template-columns: 1fr 800px 800px 1fr;
但是当浏览器窗口的大小低于1600px时，这个解决方案就不起作用了。
Codepen
浏览 11提问于2021-11-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
