css-grid 相关问题

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

有没有办法通过纯 HTML/CSS 来做到这一点？这就是我想要实现的目标： |----------------------------| <-- start of screen | header | fixed height |--------------...

html css css-grid

回答 1 投票 0

防止 CSS 网格行随着添加更多项目而扩展

我有一个相当简单的 CSS 网格，有 12 列。我正在使用 CSS 网格的行开始和行结束功能将我的项目准确放置在我想要的位置。但我遇到了一个问题，我越...

css tailwind-css css-grid

回答 1 投票 0

CSS 网格：两列，除非小于 150px

我有一个网格谜语，看起来很简单，但我就是不知道，两次AI聊天也失败了。我有这个： .续{ 显示：网格；间隙：20px；网格模板列：重复（自动...

html css css-grid

回答 1 投票 0

如何消除高度为0的CSS网格的间隙

我最近开始使用CSS网格。我需要设置一个空的 div 元素作为网格元素之一，以便我可以在需要时通过 javascript 插入内容。问题是间隙应用于此

html css css-grid

回答 2 投票 0

同一网格区域中的多个网格子项

我想创建一张非常简单的卡片，仅包含一张图像、一个段落和两个按钮。见下图：我要创建的卡片： ... 我想创建一张非常简单的卡片，仅包含一张图像、一个段落和两个按钮。见下图：我要创建的卡片： <div class="container"> <img src="" alt=""> <p></p> <button></button> <button></button> </div> .container{ padding: 2rem; grid-template-columns:[img-start] 120px [img-end content-start] 1fr [content-end]; grid-column-gap: 1.6rem; grid-template-rows: repeat(2, auto) } 然后我放置按钮： button{ grid-column: content; grid-row: 2/3; } .container { padding: 2rem; grid-template-columns: [img-start] 120px [img-end content-start] 1fr [content-end]; grid-column-gap: 1.6rem; grid-template-rows: repeat(2, auto) } button { grid-column: content; grid-row: 2/3; } <div class="container"> <img src="" alt=""> <p></p> <button></button> <button></button> </div> 但是，这些按钮重叠并且彼此不相邻，所以我想知道是否有一种方法可以将多个网格项放置在正常的网格区域中，并说该区域就像一个弹性行包装器？非常感谢！我会使用带有一些包裹按钮的 div 的 Flexbox，并将此 div 分配到网格区域内，但我想使用网格来获取此 CSS 属性的知识。所以我想知道是否有一种原生网格方式可以做到这一点？正如@Chris Barr提到的，当内容均匀分布为列和行时，CSS 网格布局非常有用。在这种情况下，您可以使用如下所述的Flex。 .container { display: flex; flex-direction: row; padding: 10px; border: 1px solid #000; width: 500px; } .thumbnail { width: 150px; } .content { padding-left: 10px; } <div class="container"> <img src="https://shorturl.at/aceI2" alt="" class="thumbnail"> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem diam, egestas at ipsum nec, luctus molestie turpis. Proin tempus sagittis lobortis. Ut nec velit ac odio eleifend semper. </p> <button>Button 1</button> <button>Button 2</button> </div> </div>

css css-grid

回答 1 投票 0

全宽背景，具有以视口为中心的网格布局

我有一个简单的网格布局来显示单列元素，如下所示：身体 { 显示：网格；调整内容：居中；网格自动流：行； } 正文 > * { 宽度：75vw；最大-

html css css-grid

回答 1 投票 0

我的 html 标签不会进入网格的“aside”部分

我在网格方面遇到了麻烦。我设置了边界，除了我想要在屏幕右侧的旁边之外，所有内容都正确地进入网格。附带说明一下，这是使用 SASS。我也...

html css sass css-grid

回答 1 投票 0

我的旁白不会进入网格的“旁白”部分

我在网格方面遇到了麻烦。我设置了边界，除了我想要在屏幕右侧的旁边之外，所有内容都正确地进入网格。附带说明一下，这是使用 SASS。我也...