标签[css-grid] - 堆栈内存溢出

无法找到卡片不在网格格式内的原因 - Cannot locate why the cards are not staying within the grid format

我正在尝试制作一个响应式网格，其中包含卡片，但是，我终生无法弄清楚为什么卡片不能正确地放入列中。使用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 由于未正确装入列中，卡片最终会溢出容器。我也试过grid-template ...

为什么 text-overflow 不是 function 在网格中有一个 div？ - Why does text-overflow not function with a div in a grid?

我试图让我的设计具有响应性，这样当屏幕宽度变小时，文本应该被三个点“截断”。但是，在我的情况下，这似乎不是 function，因为 .container 元素似乎只是溢出到主元素中，而不是文本变小。我该如何解决这个问题？提前致谢！ ...

无法使用网格和样式组件正确渲染反应分屏组件 - unable to properly render a react split-screen component using grid and styled-components

我刚刚学习了如何创建一个分屏（2 个屏幕）组件，该组件在父容器上使用“display: flex”，在其子容器上使用“flex: 1”来生成左组件和右组件。现在我正在尝试创建一个分屏（5 个屏幕）组件，它使用“显示：网格”来生成 3 列和两行，左侧边栏占据第一列，两行和其他四个屏幕各占向上 1 列 ...

如果缺少某些 div，如何填充网格行？ - How to fill the grid row if some div is missing?

我正在使用 tailwindcss 和这个 html：回复：https://play.tailwindcss.com/L8McFjGBVC<div class="grid grid-cols-12"> <div class="col-span-4 bg-red-300"&g ...

创建一个网格，其中网格项具有最大宽度但在设备宽度上仍然等距 - Create a grid where the grid items have a max-width but are still equally spaced across the device width

我正在尝试创建一个间距为1fr 1fr 1fr的（2 行 - 3 列）网格。在每个网格项中都有一个<img> ，其max-width: 512px 。我给了网格一个margin: 0 3.75rem 。现在我遇到了网格项目大于网格项目内容 (512px) 的问题。我怎样才能制作一 ...

我的 flex box 项目没有定位在我想要的位置 - My flex box items are not positioning where I want them to

我试图根据我指定的具体位置对齐我的网页设计（作为 JPG 附件）上的副标题和正文。我使用 Photoshop 设计了该页面，目前正在对 position 中 CSS styles 中的 flex 容器中的元素使用像素测量。但是，我还想实施一个断点，该断点将在特定屏幕尺寸下改变网页的样式。我不确定 ...

我的animation重复了几次css的动作 - My animation repeats the movement several times in css

我有一个 animation，当我 hover 在元素开头的 div 上它一直重复时，它会卡住重复自己。 #servicios { text-align: center; } #servicios ul li { list-style: none; }.grid-container { displ ...

如何让我的网格布局部分每个跨越 4 列？ - How can I make my grid layout sections to span 4 columns each?

我正在尝试网格布局，但似乎无法让左侧、中间和右侧各跨越 4 列，沿着 12 列网格中的同一行。 .container { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(100px, aut ...

使网格项跨越所有行而不影响其他网格项 - Making a grid item span all the rows without affecting the other grid items

我正在尝试制作一个动态网格，其中每个新项目都进入单个列内的新行，但最后一个项目必须分成一个新列并填充整个网格列，而不会影响第一列中的其他行. 请注意，项目的数量是动态的，所以我不能使用任何固定值和选择器来定义布局。我正在寻找的布局：我试过的如您所见，第一列中的行具有相同的高度。我希望第一列第 ...

防止 CSS 网格行高随动态内容增长 - Prevent CSS grid row heights growing with dynamic content

是否可以定义一个 CSS 网格，其中自动行（其中的动态数字）的大小仅基于它们的数量，即填充可用的垂直空间 - 然后包含该垂直空间内的任何内容。见下文，左侧显示了当内容不会导致行增长时分配的相等行高大小。右边是问题 - 长文本导致高度然后变得不相等。代码在这支笔： https://codepen ...

带有重叠文本框的主图 - Hero image with overlapping text box

我正在尝试制作一个具有重叠文本框的主图，但我正在努力让它按照我喜欢的方式工作。如果不将网格行高更改为较大的数字，我无法让英雄高度匹配我想要的大小。我也无法让文本框不覆盖大部分图像而不用大数字做另一个行高。这就是我想要实现的目标：这是我到目前为止的代码： .shell { display: ...

如何在CSS Grid中并排设置li的 - How to set li's side by side in CSS Grid

我需要将 li 并排放置，但我很难做到这一点。 .logo { display: grid; grid-column: span 2; justify-content: start; }.logo h4 { grid-column: 2; } nav { display: grid; } ul { ...

CSS-grid：自动跨越项目 - CSS-grid: automatically span items

这个赏金已经结束了。此问题的答案有资格获得+50声望赏金。赏金宽限期在1 小时后结束。 Dill正在从信誉良好的来源寻找答案：我很确定这是不可能的。我想 go 当然可以。有没有办法让网格项自动跨越所有可用空间？例如这里，网格有两行和两列。在第一行中，第二列是空闲的，所以我想跨越该项 ...

如何在网格末尾插入div？ - How to insert div at the end of a grid?

我有以下代码： .my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 20px; }.item { background-color: #ddd; hei ...

为什么我的javascript应用css网格属性很快就消失了？ - Why is my javascript applying css grid properties quickly disappearing?

我正在尝试使 JS function 在调用时将 css 网格模板的值设置为来自表单的信息，但是当我调用它时，网格出现并在一秒钟内迅速消失。从很短的时间来看，我还可以看到它只生成行而不生成列。编辑：我在下面添加了一个代码片段 let container = document.getElemen ...

如何使用 CSS 响应式地将任意元素移动到侧边栏 - How to move arbitrary elements into sidebar responsively using CSS

我有一个布局，其中有 N 个块元素。这些元素垂直堆叠（正如块元素所预期的那样），这是我对小屏幕的期望......但是，在大屏幕上我想将一些元素移动到侧边栏（仅使用 CSS）。我在想也许这可以通过显示网格实现？还是 CSS 技术的其他一些组合？这是一个片段.. 样式只是为了给 div 一些颜色 ...

我的 HTML 和 CSS 网格不工作？网格的各个部分似乎都是堆叠的 - My HTML and CSS grid isn't working? The sections of the grid all appear to be stacked

我已经创建了一个网格，目前它应该只有 4 行，所以为了查看我向它们添加了边框的行，但是我只看到了一条线，而不是网格中不同 div 的边框。 *{ margin: 0; padding: 0; box-sizing: border-box; } body,html{ overflow-x: hidd ...

我无法在 CSS 网格布局中对齐导航栏，我该如何解决？ - I am having trouble aligning my navigation bar within my CSS grid layout, how can I fix this?

我目前正在从事 web 开发训练营项目，我需要在其中创建一个致敬页面。我已经设计了页面并开始处理 HTML 和 CSS 文件，但我遇到了一个我似乎无法解决的问题。我使用的是 CSS 网格布局，导航栏应该从第二列开始，但它延伸到了网格边界之外。我已将 each.item 定位到网格中它们自己的 ...

在保持宽高比的同时使用浏览器缩小或放大 HTML 元素 - Make HTML element scale down or up with browser while keeping aspect ratio

我在 A4 纸上销售贴纸，我有很多客户询问我可以在“特定尺寸”获得多少贴纸。我正在制作一个页面，您可以在其中输入贴纸的长度和宽度，它会计算出 A4 纸上可以容纳多少张该长度和宽度的贴纸。纸张为 210x297mm。我总是必须在所有设计上留出 2 毫米的边框，并在每个徽标之间留出 2 毫米的空间 ...

css中的定位元素 - Positioning elements in css

可视化我需要编程的内容对可视化中显示的内容进行编程的理想方式是什么？我需要 h1 和那个 h1 下的一个段落，h2 和那个 h2 下的一个段落在左侧，图像在右侧使用“float：right”，但我无法实现它. 另外，我需要整个“容器”出现在网页的中间，就像在图像上一样。如果有人能提供帮助，我会很 ...