css-grid 相关问题

CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动,表格,绝对定位甚至flexbox(另一种CSS3技术)来构建各种网格,从简单到复杂。一般情况下,请勿将此标记用于CSS网格系统。

如何制作 CSS 网格,其中列数较少的行会弯曲填充?

假设我有一个 CSS 网格,其中每行由 4 列组成 。网格{ 网格模板列:1fr 1fr 1fr 1fr; } 对于任何少于 4 的行,是否可以使用 CSS 指定这一点

回答 1 投票 0

CSS Grid 父容器溢出-x 问题

在 chrome devtools 响应式(375px)中我有这个: &... 在 chrome devtools 响应式(375px)中我有这个: <div className="w-screen overflow-x-auto"> <div className="grid grid-cols-[repeat(7,_100px)] bg-blue-200"> <div className="sticky left-0 bg-green-200">col1</div> <div>col2</div> <div>col3</div> <div>col4</div> <div>col5</div> <div>col6</div> <div>col7</div> </div> </div> 为什么当我在 x 维度中滚动到第 5 列时,该列开始将 col1 推出视口? 🤔 .overflow-x-auto { overflow-x: scroll; width: 100vw; } .grid { display: grid; grid-template-columns: repeat(7, 100px); grid-template-rows: 50px; background: lightblue; } .sticky { position: sticky; left: 0; background: green; } <div class="overflow-x-auto"> <div class="grid"> <div class="sticky">col1</div> <div>col2</div> <div>col3</div> <div>col4</div> <div>col5</div> <div>col6</div> <div>col7</div> </div> </div> 这是没有顺风的片段。 这里是您问题的重复: 您的问题是网格容器上缺少“宽度:最大内容”,上面的链接比我更好地描述了这种方式

回答 1 投票 0

哪些方法/如何复制此“价格比较”响应式卡片布局?

计划对比桌面: 计划比较手机: 你好, 我正在寻找一些关于设计这部分布局的方法的想法。 此部分有桌面版和移动版(上图)...

回答 1 投票 0

显示网格:边到边网格行(最后一行项目后没有空格)如何?

请看这个游乐场 https://play.tailwindcss.com/SMkXmO9Mo8 正如文本所说,我希望网格行项目在宽度灵活的容器中均匀分布并边到边。 证明内容:

回答 1 投票 0

无法将CSS中的图像置于网格中

我一直在尝试在 Codecademy 上完成这个 Web Dev 挑战项目,但我一直在尝试将图像放在网格中居中。我尝试过在几乎 e...

回答 1 投票 0

为什么主容器没有响应,而顶部(标题)却有响应,即使它们具有相同的样式?

标题包含3部分: 第一个标题 第二个标题 主容器 这三个容器都有相同的样式,但正如您在图片中看到的那样,主容器并没有像其他两个那样缩小。 ...

回答 1 投票 0

有没有一种方法可以增加 CSS 网格中的框高度而不影响行中的其他框?

我目前正在设计一种类似于屏幕截图中所附布局的布局。为了实现这一目标,我选择了 CSS 网格,因为它易于使用且响应迅速。 然而,我遇到了一个

回答 1 投票 0

关于 CSS 网格和嵌套与 FontAwesome 的差异的问题

我遇到了 CSS 网格和嵌套的问题,我希望有人可以帮助我澄清其中的差异。以下是我正在使用的两组 CSS: 第一个 CSS 和结果: .菜单垂直...

回答 2 投票 0

@container 查询不会更改网格模板列值

有一个页面,我们要求如果容器宽度低于视图大小,则将 5 列更改为 2 列,然后尝试以下操作: 。列表 { 背景颜色:灰色; 显示:网格; 网格间隙:4...

回答 1 投票 0

为两个元素分配相同的 CSS 网格区域时如何避免重叠?

我的标记具有以下结构。我想要一个具有三个断点的响应式布局,其工作原理如下: 大视口,三列: “......导航......&......

回答 1 投票 0

关于 CSS 网格和嵌套差异的问题

我遇到了 CSS 网格和嵌套的问题,我希望有人可以帮助我澄清其中的差异。以下是我正在使用的两组 CSS: 第一个 CSS 和结果: .菜单垂直...

回答 1 投票 0

如何指定网格中合并行的高度?

创建一个网格,它的布局就像 ABC 阿德 FG 我希望A区的高度是96px,E区的高度是48px,其他都是auto。 。桌子 { 显示:网格; 网格模板列:9...

回答 1 投票 0

在第三个文本行与第一个文本行的网格中换行时遇到问题

这是我第一次使用网格布局。我在弄清楚如何在第三行上换行文本以及现在在第一行上的显示方式时遇到了一些麻烦。 现在看起来是这样的: 当前网格 -...

回答 1 投票 0

垂直和水平对齐网格容器

单位网格需要垂直和水平对齐,位于主网格的正下方。 主网格位于页面的中心。 图像附在下面需要放置单元网格的位置...

回答 1 投票 0

如何仅通过CSS移动堂兄html元素

我正在制作一个简单的日历,其中以天为列,每天有多个事件。这很简单。然而,有些事件会持续两天,我想知道是否可以用 css 来显示它...

回答 1 投票 0

固定侧边栏和固定标题,带有可滚动网格主要内容

我在修复布局时遇到问题,所以基本上我想为我的网站项目设计一个布局,它有一个侧边栏和一个标题,我希望标题和侧边栏被修复,但我的内容......

回答 1 投票 0

如何将此网格放入移动设备上的 1 列列表中

我有一个带有中心文本和周围其他菜单选项的菜单网格,我希望它在移动设备上作为单行网格工作。我想要中心大文本空间,网格的其余部分围绕它

回答 1 投票 0

使用绝对位置调整 div 大小

是否可以用绝对位置调整div的大小? 我希望这个粉红色模态保持与输入相同的宽度并调整大小。 该模式将在下拉组件中使用。所以,应该是

回答 1 投票 0

图像溢出网格高度

我正在尝试使用 CSS 网格创建一个两列布局,左侧图像,右侧文本内容。然而图像仍然溢出。 我一直在尝试修复它,但我只能通过

回答 1 投票 0

CSS 上的 minmax() 函数无法正常工作

身体{ 宽度:100%; } .父级{ 背景:红色; 内边距:10px; 显示:网格; 网格模板列:重复(自动填充,minmax(300px,自动)); 行距:10px; c...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.