css-grid 相关问题

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

我想创建一张非常简单的卡片，仅包含一张图像、一个段落和两个按钮。见下图：我要创建的卡片： ... 我想创建一张非常简单的卡片，仅包含一张图像、一个段落和两个按钮。见下图：我要创建的卡片： <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。我也...