css-grid 相关问题

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

我在弹性容器中有大量可变数量的.item，它们必须能够响应式换行。每个 .item 都有相同的标记，但文本内容的数量不同。我想要上衣...

html css flexbox css-grid

回答 1 投票 0

我试图将具有“sidebar”类的div元素和具有“editorWindow”类的div元素放在彼此相邻的列中，但它不起作用。我试图在彼此相邻的列中获取具有“sidebar”类的 div 元素和具有“editorWindow”类的 div 元素，但它不起作用。 <div className="mainWrap"> <div className="sidebar"> <div className="innerSidebar"> <div className="sidebarLogo"> <img src="/code-socket-light.png" className="sidebarLogo" alt="Sidebar Logo"/> </div> <h3>Connected Users</h3> <div className="userList"> { users.map(eachUser => <User key={eachUser.socketId} username={eachUser.username}/>) } </div> </div> <button className="btn copyBtn">Copy Code Room ID</button> <button className="btn leaveBtn">Leave Code Room</button> </div> <div className="editorWindow"> <Editor /> </div> </div> 这是我使用的CSS .mainWrap{ display: grid; grid-template-columns: 230px 1fr; } .sidebar{ background: #1c1e29; padding: 16px; color: #fff; display:flex; flex-direction: column; } 出了什么问题？我试图使用 CSS 网格显示“mainWrap”div 中的两个 div 并排显示，但由于某种原因它不起作用。它的工作🤔 .mainWrap { display: grid; grid-template-columns: 230px 1fr; } .sidebar { background: #1c1e29; padding: 16px; color: #fff; display: flex; flex-direction: column; } <div class="mainWrap"> <div class="sidebar"> <div class="innerSidebar"> <div class="sidebarLogo"> <img src="/code-socket-light.png" class="sidebarLogo" alt="Sidebar Logo" /> </div> <h3>Connected Users</h3> <div class="userList">User</div> </div> <button class="btn copyBtn">Copy Code Room ID</button> <button class="btn leaveBtn">Leave Code Room</button> </div> <div class="editorWindow">edittor</div> </div>

javascript html css reactjs css-grid

回答 1 投票 0

如何创建一个响应式用户列表，可以在窗口拉伸和压缩时进行调整，选择带有复选框的用户？

蓝色轮廓应该围绕整个 div（每个用户块）：以网格覆盖作为参考：这是当前输出，其中包含用户个人资料图片、姓名的 div...

html css css-grid

回答 1 投票 0

网格中水平居中按钮

我试图将按钮放在其列的垂直和水平中心。我设法将它们垂直居中，但我不知道如何水平居中；条目应为三...

html css css-grid

回答 1 投票 0

垂直对齐弹性项目的内部元素（类似于网格，但带有换行）

我在弹性容器中有可变数量的 .item，这样它们就可以响应式换行。每个 .item 都有相同的标记，但内容不同。我希望所有都垂直对齐... 我在弹性容器中有数量可变的 .item，这样它们就可以响应式换行。每个 .item 都有相同的标记，但内容不同。我希望所有 <h1> 都垂直对齐，所有 <p> 也都垂直对齐。有没有一种方法可以在不重写标记或使用 javascript 的情况下实现此目的？我知道这可以通过网格并将 .items 设置为 display: contents; 来完成，但“多行网格”不会换行。示例：https://codepen.io/vzjrz/pen/KKrGOWq 将 margin-top: auto; 添加到 css 中的“p”标签

html css flexbox css-grid

回答 1 投票 0

CSS 网格自动跨越可用空间

我正在尝试创建一个包含 2 个项目的基于 css 网格的布局，第一个项目将跨越宽度的 1/3，第二个项目将跨越宽度的 2/3，但是当宽度低于某个阈值时，第二个项目将跨越宽度...

html css flexbox css-grid

回答 3 投票 0

CSS 网格行无法获得适合内容的最小可能高度

我很难解释我的问题。在获得有关问题本身的帮助之前，我会非常高兴通过评论获得一些帮助。我正在使用 CSS Grid 来布局不同的图像...

css css-grid

回答 0 投票 0

如何使用 CSS @container 查询子网格？

让我们考虑仅具有子网格功能的卡片示例。身体 { 最大宽度：500px；保证金：1rem 自动； } 。容器 { 显示：网格；网格模板列：2fr 1fr；网格间隙：1rem； } .

html css css-grid subgrid container-queries

回答 1 投票 0

有没有办法在一个CSS样式表中同时使用网格和弹性框

我目前正在学习html和css。在我的代码中，我使用网格框作为组织布局的主要方法。我认为可以将 grid 和 flex box 混合在一起。当我去

html css flexbox css-grid

回答 0 投票 0

图像在 CSS 网格中溢出 - 如何修复？

我创建了一个网格，其中包含两列和三行的图像，并且它们之间有一个间隙，但是右侧的图像溢出了。我创建了一个网格，其中有两列和三行的图像，中间有一个空隙，但是右边的图像溢出了。 <div class="main-container"> <img src="./images/.jpg" alt=""> <img src="./images/.jpg" alt=""> <img src="./images/.jpg" alt=""> <img src="./images/.jpg" alt=""> <img src="./images/.jpg" alt=""> <img src="./images/.jpg" alt=""> </div> .main-container{ display: grid; grid-template-columns: repeat(1fr, 1fr); width: 100%; height: 100%; grid-column-gap: 90rem; gap: 6rem; } .main-container img{ width: 100%; height: 100%; object-fit: cover; margin-top: 20px; margin-right: 20px; margin-left: 20px; } 我尝试添加 min-height 和 min-width 的 0px 但它仍然溢出，我期待它阻止图像溢出并摆脱滚动条。使用grid-template-columns: repeat(2, 1fr);或grid-template-columns: 1fr 1fr; grid-template-columns: repeat(1fr, 1fr); 不正确。你会得到 Invalid property value 错误要删除水平滚动，请删除.main-container img中的左右边距如果您需要图像之间的空间，请使用gap属性。如果您需要左侧或顶部的一些空间，请使用父容器的填充同时从width中删除height和.main-container .main-container{ display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 90rem; gap: 6rem; padding: 20px; } .main-container img{ width: 100%; height: 100%; object-fit: cover; }

html css css-grid

回答 1 投票 0

相互对齐网格元素

当需要对齐内部不同内容的网格容器时，问题就出现了。如果你设置 grid-auto-rows: 1fr 属性，那么网格是对齐的，但是会有一个空白空间

html css flexbox css-grid

回答 1 投票 0

Css Grid：在不使用 grid-gap 的情况下，特定边（左、右、底部或顶部）的距离是多少？

我是第一次开始使用 Grid CSS。我想在每个项目之间留出不同的空间，但我不想使用网格间隙，否则如果我使用网格间隙，我会得到 ...

html css css-grid

回答 1 投票 0

如何使内容区域占据其最大宽度的整个宽度

我有一个看起来像这样的 CSS 网格，全面启动 |开端 |内容开始 |内容端 |宽端 |全端我想让它做什么：我正在努力使内容区域始终具有...