css-grid 相关问题

CSS 网格延伸到父级之外

在使用 CSS 网格的 Angular 15 组件中。当网格只有一行时，网格底部与“服务部分”底部相同。当我有多于一行时，网格会延伸到底部之外......

Safari 浏览器中出现长单词的 CSS 网格错误

我有两个具有相同宽度的两列的卡片的示例。 上卡是用flexbox实现的。下层卡片带有网格。 然而，在 Safari 中，网格示例会推动左列...

从 CSS 网格中排除标题

我向 HTML 页面添加了一些子标题，但子标题导致列显示不正确，如此图所示。 我已经尝试过在子标题上显示块，但我认为...

CSS Grid布局中，子元素如何设置为非自动缩放？

文字1 文字2 Lorem ipsum dolor 坐 amet... <div class="demo1"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet ...</p> </div> <div class="demo2"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum.</p> </div> * { margin: 0; padding: 0; } .demo1, .demo2 { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); } .demo1 { margin-bottom: 50px; } .demo1 .des { grid-area: 2/1/3/3; } .demo2 .des { grid-area: 1/1/3/2; } 当我使用CSS网格布局时，我有一些问题。 如何设置.text1和.text2元素宽度或高度不自动缩放？ 我希望它们的宽度或高度等于内容的宽度或高度。 请帮助我，谢谢。 您可以使用 aspect-ratio 来做到这一点： .text1, .text2 { aspect-ratio: 1; } /* extra styles to highlight boxes*/ .text1 {background-color: #f7f7f7;} .text2 {background-color: #e7e7e7;} * { margin: 0; padding: 0; } .demo1 { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); margin-bottom: 50px; } .demo1 .des { grid-area: 2/1/3/3; background-color: #d7d7d7; } <div class="demo1"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet ...</p> </div> 我相信您是在问如何设置 .text1 和 .text2 以使宽度和高度等于其内容。使用width: fit-content .demo1, .demo2 { width: fit-content; } 有关 fit-content 的信息 我可以使用width: fit-content吗？显示95%的全球支持。 * { margin: 0; padding: 0; } .demo1, .demo2 { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); width: fit-content; } .demo1 { margin-bottom: 50px; } .demo1 .des { grid-area: 2/1/3/3; } .demo2 .des { grid-area: 1/1/3/2; } <div class="demo1"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet ...</p> </div> <div class="demo2"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum.</p> </div>

CSS网格：如何将跨行的基线与其他列的最后一行对齐

我想将a的基线与c对齐。 ＃网格{ 显示：网格； 网格模板列：1fr 1fr； 对齐项目：基线； } ＃A{ 网格行：1 / 跨度 2； 网格列：1； 内边距：8px； 背景...

网格布局内的边框

我有一个代表井字游戏的 CSS 网格。我只想在网格内添加边框。今天，我是这样进行的： ：根 { --border: 2px 虚线 #393939; --符号颜色：#

CSS网格：合并每第N行的单元格

不确定这是否可行，但我想要一个CSS网格模板，其中每第N行（例如每第三或第四行）会将单元格合并为一个......例如，这是一张照片，我的哇...

你能用单行Flexbox布局创建类似CSS网格的模板吗？

我可以用flexbox制作这个结构吗？ 下面我用网格给出了一个例子，但我想用弹性盒来做这个。 。容器 { 显示：网格； 网格模板列：自动自动自动； 差距...

垂直对齐许多弹性项目的内部元素（必须能够换行）[重复]

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

无法使用 CSS 网格显示两个相邻的 div 元素

我试图将具有“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>

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

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

网格中水平居中按钮

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

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

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

CSS 网格自动跨越可用空间

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

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

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

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

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

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

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

图像在 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; }

相互对齐网格元素

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

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

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