css-grid 相关问题

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

尺寸为“自动”的 CSS 网格列宽度比列中的图像宽

我的响应式 CSS 网格在特定维度上表现得很奇怪——在下面的代码片段中，我希望图像占据第一列（自动大小）并跨越给定断点的网格的所有行。

css css-grid

回答 2 投票 0

如何在没有媒体查询的情况下使 ASCII 艺术 <pre> 标签响应？

我的用户名是 ASCII 艺术横幅/标题，我想让它更具响应性。现在我正在使用媒体查询，但我想知道是否有办法让它在 CSS g 中/在 CSS g 中扩展...

html css css-grid

回答 1 投票 0

在 CSS 网格中使用背景图像

我正在尝试使用 CSS 网格让图像填充网页。除了使用 CSS 网格之外，我还可以使用 CSS 属性“背景图像”来做到这一点。但是，一旦我尝试使用 background-image

css image background-image css-grid

回答 2 投票 0

如何让网格项之间不留空白？

图片在上图中，第二个网格项和第五个网格项之间存在幽灵空间，我想知道是否有使用 tailwindcss 的解决方案我的代码：

javascript reactjs tailwind-css css-grid

回答 0 投票 0

CSS 3列使左右相等，中间一个自动

如何用CSS制作这个布局？左侧应等于右侧。中间的应该增长与其他列留下的空间一样多我的布局是如何用css做这个布局？左边应该等于右边。中间的应该增长到其他列留下的空间我的布局是 <div id='parent'> <div id='col1'></div> <div id='col2'></div> <div id='col3'></div> </div> col1 和/或 col3 可能会丢失，我仍然应该能够使用 css grid 之类的东西制作 3 列和 2 个 div 的网格我试图向家长提出的申请： grid-template-columns: 1fr auto 1fr; display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; 但是当中间的内容这么大时，它并不能使左等于右手动设置左右宽度不是我要找的解决方案。它们是动态的，我应该能够以某种方式使它们相等。它们的实际宽度是最大内容，宽度较小的一列应该与宽度较大的一列相等。中间的应该得到所有剩下的空间。

html css css-grid

回答 0 投票 0

旋转 css 网格项目以创建垂直文本：如何扩展项目新的垂直高度以适合文本？

我准备好了一个jsfiddle https://jsfiddle.net/1g8bc9ho/5/ 我正在尝试制作一个图形区域。使用 css 网格设置标题、绘图、yaxis 和 xaxis 区域。我旋转了 yaxis 标签，但是 t...

css css-grid css-transforms

回答 1 投票 0

带有 minmax() 的响应式网格在使用网格区域时不起作用

我想实现一个三列两行的响应式网格布局，其中最后一列横跨两行并且包含一张图片，如下图：具体来说，我希望图像移动到

css layout responsive-design css-grid

回答 1 投票 0

带有 minmax() 的响应式网格在跨行时不起作用

我想实现一个三列两行的响应式网格布局，其中最后一列横跨两行并且包含一张图片，如下图：具体来说，我希望图像移动到

css layout responsive-design css-grid

回答 0 投票 0

我的网格对齐有什么问题？

所以我对编码还很陌生，由于某种原因，我尝试设置的网格没有正确对齐。当我检查页面时，网格看起来是正确的，有点大但没有错位，但是项目...

javascript html css alignment css-grid

回答 0 投票 0

动态网格删除空白

我创建了一个动态网格。那就是放置尽可能多的列。唯一的问题是，需要设置宽度。在我的示例中，我将其设置为 100%。那就是生成一个空白

html css css-grid

回答 2 投票 0

如何使用自动调整将所需项目设置成一行

你知道在使用 CSS 网格自动调整时如何设置预期的列吗？默认情况下，当一个项目不适合时，它会一个接一个地转到下一行。例如我有 4 个项目，我需要以下...

css css-grid

回答 1 投票 0

我需要帮助设计一个使用 css 网格的 React 应用程序

我有一个只有 3 个 jsx 文件的 React 应用程序，main.jsx、app.jsx 和 carousel.jsx 以及两个 CSS 文件 index.css 和 App.css。我只是将 Carousel 组件导入 app.jsx 和 putti ...

css reactjs carousel css-grid

回答 0 投票 0

CSS：我们可以在使用相对值时获得网格环绕吗？

我们有一个项目网格，我们希望它是 2x2，直到窗口缩小太多然后它们被堆叠，1x4。我们一直在试图说“太多了，每当他们被

css css-position css-grid

回答 0 投票 0

居中 CSS 网格内容并创建背景图片

我已经坚持了很长一段时间，而且我对 css 一般都是新手。我的目标是制作一个 3 列布局，其中第一列和最后一列为空，它们将用作边距...

html css css-grid hugo

回答 2 投票 0

在 React 的 Card 组件中使用 Swiperjs 时，如果我使用网格模板列，swiper 中的图像会失真：repeat(2, 1fr)

在 React 的 Card 组件中使用 Swiperjs 时，如果我使用网格模板列，swiper 中的图像会失真：repeat(2, 1fr) {产品... 在 React 的 Card 组件中使用 Swiperjs 时，如果我使用网格模板列，swiper 中的图像会失真：repeat(2, 1fr) <div className="products-array"> {productList?.map((product) => ( <Card product={product} key={product?._id} /> ))} </div> .products-array { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-row-gap: 1rem; grid-column-gap: 1rem; @media screen and (max-width: 768px) { grid-template-columns: repeat(2, 1fr); } } 当我在 Card 组件中使用它时没有 swiperjs 它可以工作但是我必须将它与 Swiper 一起使用。

reactjs css-grid responsive swiper.js

回答 0 投票 0

在 CSS 中创建一个部分条纹的字母

有谁知道如何在CSS中实现这种效果？有可能吗？我知道 CSS Grid 可以解决字母的定位问题，但我不知道如何实现部分条纹的字母。我有

css css-grid text-mask

回答 1 投票 0

如何让最后一行的项目占用CSS Grid中的剩余空间？

有没有办法强制网格的最后一行中的所有项目填充该行，无论它们有多少？我不知道网格中的项目数量，所以我无法定位它们

css grid-layout css-grid

回答 6 投票 0

如何防止显示：网格自动拉伸子表行

我有一个名为“passives_div”的主（容器）div。我在这个 div 中有 3 个表。如果其中一个表的行数少于其任何同级表，则这些表行会拉伸，并且我 ...