使1fr + 1fr的宽度= 2fr (带栅格间隙)

文章/答案/技术大牛

发布

0回答

css、css-grid

怎样才能使我的前两列与第三列的宽度合计相同？如果我像这样将它们分开：.grid { grid-template-columns:1fr 1fr 2fr;} <div class="large">Col 3</div> <

浏览 2提问于2017-12-12得票数 4

回答已采纳

2回答

两个CSS网格不在同一个父容器内对齐

html、css、alignment、css-grid、grid-layout

我在同一个父容器中有两个独立的CSS网格。然而，网格并没有完全排列起来--顶部网格中的文本需要从第二列开始(如图所示)，但是它与下面的网格稍微偏离了一致，这是由列大小引起的我真的可以不把它们放在同一个网格里，因为网站的设计。是否需要让它们与CS

浏览 1提问于2019-07-11得票数 2

回答已采纳

2回答

如何将网格列与另一个网格布局相等地设置

html、css

我有2种类型的布局使用显示网格。第一列宽度为: 239.40px如何使用fr来平等地设置它？这是我的密码.grid-container { grid-gap: 25px;.grid-container--news1 { grid-template-columns: 2fr <

浏览 5提问于2022-04-12得票数 2

回答已采纳

3回答

在div中定位

html、css

我想将两个容器与父div中的文本对齐。其中一个应该放在父div的中心(宽度“根据需要”)，第二个应该对齐到父div的右侧。父div和第一个容器(在中间)应该具有可调整的宽度和最小宽度，而第二个容器(在右侧)应该具有固定的宽度。我的代码是： .parentDiv { width: 30%; position: relative;

浏览 19提问于2021-04-14得票数 0

回答已采纳

2回答

网格-间隙只更新一侧的宽度。

css、css-grid

如您所见，当我更改grid-gap时，只更新1、3和4的宽度。我希望它更新1的宽度以及2、3和4的宽度。.container { width: 500px; gap: 20px; /* Try to changethis, wid

浏览 1提问于2019-08-22得票数 3

回答已采纳

1回答

如何使用css网格构建响应式网格

css、css-grid

display: grid; grid-gap: 20px; }当它没有网格间隙时，它是可以的，在第一行图像具有相同的宽度，在第二行也是如此。但是当我添加网格间距时，第二行的第二个元素变得比他左边和右边的邻居大一点。我尝试使用calc()，但它不起作用。

浏览 17提问于2018-12-13得票数 3

回答已采纳

3回答

如何在CSS表格中指定"1fr“的宽度和高度？

css、css-grid

我有一个相当复杂的破碎布局，我试图用CSS网格来实现，这是我的列和行布局的代码： grid-template-columns: 8fr 1fr 3fr 8fr 1fr 5fr 2fr 6fr; grid-template-rows: 1fr 7fr 1fr 1fr 7fr 1fr 1fr 2fr 1fr 4fr 1fr 3fr; 这里的<

浏览 8提问于2020-03-30得票数 1

2回答

我应该如何分割css中的网格？

html、css、css-grid

所以昨天我开始学习css中的网格。我认为模仿主windows 8地铁面板将是一个伟大的锻炼(我的参考图片：)。我定义了所有的面板，得到了正确的安排。这里有一些参考代码，显示了我尝试过的模板列。1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 2fr 2fr 2fr 2fr</e

浏览 2提问于2019-08-12得票数 0

回答已采纳

1回答

媒体查询不起作用。我该如何解决这个问题

html、css、grid、responsive、media

所以我建立了一个类似于我找到的模板的网站。该网站有两个网格在它和我想用媒体查询更改列数和行数，使网站响应。然而，媒体查询只是拒绝正常工作。有两个问题: 1)它做我想做的事情，但不是我想做的时候；2)它什么都不做。media screen and (max-width:760px) { background-color: green; } @

浏览 0提问于2020-06-01得票数 2

1回答

我想把这个div分成三个相等的列，这样列表数据看起来就像3个表

html、css、angular

我正在以可观察的格式打印列表数据。我想把屏幕分成3个相似的列，这样它看起来就像一个表。但每个单元格占用的长度不同，因此不能正确对齐。

浏览 6提问于2021-03-07得票数 1

回答已采纳

1回答

CSS网格-在悬停时设置项目宽度

css、css-grid

我正在构建一个简单的CSS网格布局，如下所示..container { grid-template-columns:1fr 1fr 1fr 1fr; Column 3 Column 4 </d

浏览 1提问于2019-06-17得票数 4

回答已采纳

1回答

设置最大格柱间隙，防止膨胀。

html、css、css-grid

我有几列/行，保持内容卡在左上角(这是一个早期的网站的娱乐)。这个网站是用来使用小屏幕的(例如1024x764)。使用大屏幕进行开发时，列间隙会自动展开。如何设置内容不会比设置值更大的最大列间距宽度？.index { grid-template-columns: .30fr 500px; grid-template-rows: .2fr 1fr;

浏览 5提问于2022-08-22得票数 1

1回答

最大宽度容器内的CSS网格

html、css、grid

我有一个最大宽度为1760px的父节div。就风格而言，我能在网上找到的最好的例子就是Airbnb列表，它有2个cols，一个有listing，一个有map。section>

浏览 0提问于2020-11-17得票数 0

2回答

显示网格-背景在右侧有一个白色的空隙。

css、grid

solid blue;}<div class='left'></div></div>为什么右边有一个白色的垂直间隙

浏览 0提问于2018-10-31得票数 1

回答已采纳

1回答

如何使网格柱适合其余空间

css、css-grid

我有一个有三列的网格包装器，其中第一列最大，宽度为2fr，第二列和第三列大小相同，宽度均为1fr。我想要的是创建一个具有动态列数的网格模板，例如，如果我删除其中一列，其余列应该采用相同的剩余大小。这是我到目前为止尝试过的小提琴 .wrapper { height: 100px; grid-template-columns: 2fr

浏览 1提问于2020-12-10得票数 1

回答已采纳

2回答

减少css网格布局中元素之间的空间

html、css、css-grid

我有一个网格布局，如下所示：我想减少‘职务角色’和‘公司名称’之间的空白&我想不出怎么做。容器css如下所示： display: grid; grid-template-rows: repeat(5, 1fr); font-family: 'Alumni Sans', sans-serif;我试过：用row-ga

浏览 2提问于2022-08-16得票数 1

回答已采纳

2回答

Css网格fr单元

css、css-grid

在Css网格中我可以这样做： display: grid;} 有没有办法设置特定元素的宽度。

浏览 0提问于2018-07-05得票数 0

1回答

是什么决定了min-content的值？

html、css、css-grid

第一个网格项的min-content值是什么?为什么？ display: grid;} .grid-container >

浏览 1提问于2020-06-10得票数 0

1回答

在“网格-cols-[1 2fr，700 do，2 2fr]中的参数是什么？

tailwind-css

我正在尝试更好地理解顺风网格--有人能帮我理解1fr、700px和2fr的每一个参数<div class="grid-cols-[1fr,700px,2fr]"></div>

浏览 4提问于2022-05-26得票数 2

回答已采纳

1回答

CSS媒体查询在网格中未响应

html、css、responsive-design、css-grid

index.html 这是包含英雄图像和英雄内容(标题和副标题)的索引文件。.grid { grid-template-columns: 2fr 2fr 1fr 1fr; grid-template-rows: 1fr 2fr 2fr 2fr; } .hero-conte

浏览 17提问于2020-08-14得票数 0

回答已采纳

点击加载更多