css-grid 相关问题

如何正确布局类似的标题块

请帮忙，我不明白如何在标题中正确布局这样的块，有一个容器（1440px没关系），里面有一个徽标压在左侧，如何处理...

巨型菜单的CSS动态布局，根据菜单项的数量以行或列读取

我正在为一个大型菜单做一些原型设计，其中菜单项应该“智能”显示，根据菜单项的数量，它们将读取为行或列。 我...

如果父元素跨越所有网格列，子元素是否可以工作到网格？

我有一个简单的网格。某些元素（例如 ）跨越所有列。是否可以让页脚内的子元素适用于相同的底层网格？没有设置... 我有一个简单的grid。某些元素（例如 <footer>）跨越所有列。是否可以让页脚内的子元素适用于相同的底层网格？没有在父元素上设置完全相同的网格？ main { display: grid; grid-template-columns: 1fr 1fr; } footer { grid-column: 1 / -1; /* this gets the footer to span all columns */ } footer { /* can this be avoided? */ display: grid; grid-template-columns: 1fr 1fr; } <main> <footer> <p>some text</p> <p>some more text</p> </footer> </main> subgrid就是答案。 如果[在嵌套网格上]您在 grid-template-columns、grid-template-rows 或两者上设置值子网格，则嵌套网格将使用在父级上定义的轨道，而不是创建列出的新轨道。 main { display: grid; grid-template-columns: 1fr 1fr; } footer { grid-column: 1 / -1; /* this gets the footer to span all columns */ display: grid; grid-template-columns: subgrid; } p { outline: 1px solid green; } <main> <footer> <p>some text</p> <p>some more text</p> </footer> </main>

如何将文本与行间隙对齐到网格布局CSS？

如图所示，请看红线，正在扩大网格间隙，我想创建像“ABC”/“XYZ”这样的文本，将中心与网格间隙对齐，这可能吗.. .

CSS 网格图像无法缩放

我做错了什么，css grid 命令没有缩放网格中的项目吗？我一定是误解了 minmax 值的工作原理。 。网格 { 显示：网格； 对齐内容：居中； 我...

当每一行都包裹在自己的容器div中时，可以使用CSS网格吗？

我目前有一个带有主容器的简单表格（即显示：表格）。在该容器中，我有一些行（即显示：表行），然后有一些 div（即显示：表单元格）。 ...

CSS 网格中 div 内的 SVG 在底部添加了一些额外的填充，为什么？

我正在尝试使用 CSS 网格显示 SVG 网格。像这个例子一样简单，只是 div，还没有 SVG。这很好用。 #包装器{ 显示：网格； 网格间隙：2px； 网格-

为什么我的代码在网格中没有垂直排列？

我正在使用 React 和 MaterialUI 进行开发。我遇到了一个奇怪的问题，元素无法垂直对齐。我平时都是做后端的，所以对前端几乎一无所知

创建一个单元格大小相同但图像可以包含多个单元格的网格？

我以为我正在尝试做一些简单的事情，但我不知道该怎么做。 我将在最后提供游乐场链接：我想创建一个类似网格的视图，其中我们有给定量的 c...

响应式 CSS 网格，具有固定行和最大列，但可以显示更多项目

我正在尝试创建一个布局为 2 行 x 列的网格组件。列最多可以有 6 个，并且网格项是未知数量的反应子项，因此有 x 列。 我的网格掉了...

Angular 中嵌套数组的网格

我想从嵌套数组创建网格模板。 如果元素自然具有相同的高度，则此方法有效，但当值太长时，某些元素具有不同的高度 我想从嵌套数组创建网格模板。 如果元素自然具有相同的高度，则此方法有效，但当值太长时，某些元素具有不同的高度 <div id="container" [style.grid-template-columns]="'repeat(outerArray.length, 1fr)'" [style.columnGap.rem]="1" *ngIf="outerArray.length != 0"> <div class="outerArray" *ngFor="let inner of outerArray"> <div *ngFor="let item of inner"> {{item}} </div> </div> </div> 结果项目应该这样放置： 内部 1 值 1      内部 2 值 1      内部 3 值 1 内部 1 值 2      内部 2 值 2      内部 3 值 2 内部1值3 网格看起来像这样：（有 8 个内部数组的数组） 我想为列中的每个元素保持相同的宽度（但列可以具有不同的宽度），并在行中保持相同的高度。 表格工作得很好，但是一个内部数组中的值填充行，而不是列，并且在我看来，表格在语义上不符合我的需要。 <table *ngIf="outerArray.length != 0"> <tbody> <tr *ngFor="let inner of outerArray"> <td *ngFor="let item of inner;"> {item}} </td> </tr> </tbody> </table> 数组有不同的大小（一开始较长，然后剩下的少一项） 示例数组可能如下所示： let outerArray = [ [ "short", "bit longer", "example value" ], [ "not so long, but longer string", "short words", "bitLonger twoWords" ], [ "shorter array", "different lengths of strings" ], [ "another shorter array", "string" ] ] 数组的数量和长度可能不同，有时是 1 个 8 个元素的数组，但也可以是 8 个 2 个元素的数组。 字符串有一到两个单词，但单词有时最多有 15 个字符，因此当内部数组很少时，字符串需要两行才能适合屏幕宽度 我的完美解决方案是创建不嵌套的 div 并使用 css 样式正确放置它们 我们只需要一组内部 div。你有一个嵌套的 div 结构，所以它弄乱了布局。我使用 ng-container 作为内部 for 循环，ng-container 的特殊之处在于它不会在 HTML 中创建元素，因此我们可以使用它来运行两个 for 循环并创建一组 div。 此外，当您创建属性时[style.grid-template-columns]="'repeat('+outerArray.length+', 1fr)'" ，请确保您清楚地区分字符串和 JavaScript 变量。 之前的代码只会将repeat(outerArray.length, 1fr)渲染为字符串，而不是插入outerArray长度，所以我将代码更改为 'repeat('（字符串）+ outerArray.length（数字）+ ', 1fr)'（字符串） 我们还需要 [style.grid-template-rows]，其配置与列相同。 如果您希望所有行具有相同的高度，请使用提供的带注释的 CSS，它会向元素添加省略号并使所有单元格具有相同的高度！ 完整代码： import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule], styles: [` #container { display: grid; } /* .same-height { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } */ `], template: ` <div id="container" [style.grid-template-columns]="'repeat('+outerArray.length+', 1fr)'" [style.grid-template-rows]="'repeat('+outerArray.length+', 1fr)'" [style.columnGap.rem]="1" *ngIf="outerArray.length != 0"> <ng-container class="outerArray" *ngFor="let inner of outerArray"> <div *ngFor="let item of inner" style="background-color: red;color: white; margin-bottom:2px;" class="same-height"> {{item}} </div> </ng-container> </div> `, }) export class App { outerArray = [ ['short', 'bit longer', 'example value'], ['not so long, but longer string', 'short words', 'bitLonger twoWords'], ['shorter array', 'different lengths of strings'], ['another shorter array', 'string'], ]; } bootstrapApplication(App); Stackblitz 演示

带有 CSS 网格的响应式表单布局

我正在尝试创建一个表单布局，其列数取决于可用宽度和需要添加的项目数（项目数也是动态的，并且没有共同的最小值...

将分隔元素与其周围的重复元素居中对齐

我需要创建一个像这样的部分： 这是我已经尝试过的： 我需要创建一个像这样的部分： 这是我已经尝试过的： <div class="container"> <div v-for="(step, index) in steps" :key="index" class="step" > <div class="content"> <div class="icon"> // ICON CONTENT </div> <h3 class="title"> // TITLE CONTENT </h3> <p class="description"> // DESCRIPTION CONTENT </p> </div> <div v-if="index + 1 < steps.length" class="step-process__divider" /> </div> </div> 和CSS： .container { display: flex; justify-content: space-between; } .content { display: flex; flex-direction: column; align-items: center; text-align: center; } .step { display: flex; flex-direction: row; align-items: center; } .divider { background-color: #d9d9d9; border-radius: .2rem; height: 2px; width: 3rem; margin-top: 1.2rem; transform: translateY(-50%); margin: { left: $spacing--22; right: $spacing--22; } } ... 问题是分隔线看起来并不总是位于两个步骤元素之间的中心。 有没有更好的方法来实现这个目标？ 我希望您使用 CSS-pseudo 元素和 CSS-selectors，具体来说，:not、first-child、last-child、before 和 after。 您可以使用 :not 选择器获取不是第一个或最后一个的子元素，即它们之间的任何内容，然后在组件之前和之后添加行。 请参阅此工作示例： .container { display: flex; justify-content: space-between; } .content { display: flex; align-items: center; text-align: center; } .step { display: flex; flex-direction: row; align-items: center; } .divider { background-color: #d9d9d9; border-radius: .2rem; height: 2px; width: 3rem; margin-top: 1.2rem; transform: translateY(-50%); margin: { left: $spacing--22; right: $spacing--22; } } .custom-class:not(:first-child):not(:last-child) { display: flex; align-items: center; justify-content: center; } .custom-class:not(:first-child):not(:last-child)::before { content: '—'; } .custom-class:not(:first-child):not(:last-child)::after { content: '—'; } <div class="container"> <div v-for="(step, index) in steps" :key="index" class="step"> <div class="content"> <div class="custom-class icon"> ICON CONTENT </div> <h3 class="custom-class title"> TITLE CONTENT </h3> <p class="custom-class description"> DESCRIPTION CONTENT </p> </div> <div v-if="index + 1 < steps.length" class="step-process__divider" /> </div> </div>

CSS-网格设计选择

我是网络开发新手，有一个设计选择问题。我正在开发一款游戏，学生可以在其中学习如何乘法。现在我遇到了有关显示乘法的问题。我...

CSS 网格的顺序已关闭

Codepen：https://codepen.io/saerts/pen/poBxzNR 我有这样的 HTML 设置： 顶部 Codepen：https://codepen.io/saerts/pen/poBxzNR 我有这样的 HTML 设置： <div class="container"> <div class="block top">Top</div> <div class="block main">Main 1/3</div> <div class="block main">Main 2/3</div> <div class="block bottom">Bottom</div> </div> 我的 CSS 是： .container{ height: 100%; display: grid; grid-template-rows: min-content 1fr min-content; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; } .top{ grid-row: 1; grid-column: 1 / -1; } .bottom{ grid-row: 3; grid-column: 1 / -1; } .main{ grid-row: 2; grid-column: 1 / 2; &:nth-child(2){ grid-column: 2 / 4; } } .block{ padding: 8px;; background: lightgrey; border: 1px solid red; } 为什么第二个 div.main (1/3) 显示的顺序与预期不同？ 由于 CSS 选择器 .main，第二个 &:nth-child(2) div (2/3) 以与预期不同的顺序出现。 在 CSS 中，:nth-child() 伪类根据元素在一组兄弟元素中的位置来选择元素。在这种情况下，.main:nth-child(2)选择其兄弟元素中的第二个.main元素。但是，需要注意的是，:nth-child() 会计算父元素的所有子元素，而不仅仅是具有相同类的元素。 您可以更改 CSS 以专门针对第二个 .main，而不是使用 :nth-child(2)。您可以通过使用唯一标识第二个 .main 元素的类或另一个选择器来完成此操作。这是使用类的示例： .container { height: 100%; display: grid; grid-template-rows: min-content 1fr min-content; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; } .top { grid-row: 1; grid-column: 1 / -1; } .bottom { grid-row: 3; grid-column: 1 / -1; } .main { grid-row: 2; grid-column: 1 / 2; } .main.full-width { grid-column: 2 / 4; } .block { padding: 8px; background: lightgrey; border: 1px solid red; } <div class="container"> <div class="block top">Top</div> <div class="block main">Main 1/3</div> <div class="block main full-width">Main 2/3</div> <div class="block bottom">Bottom</div> </div>

CSS 网格，具有均匀分布的棋盘游戏单元格（方形）

我正在尝试使用 CSS 网格创建一个简单的棋盘游戏 UI。我认为这将是达到此目的的完美工具，但我无法达到预期的结果，即： 1 - 瓷砖将...

使用重复CSS网格时如何跳过第一列？

我正在尝试重新创建上面的布局。每个标题将与多个复选框项目相关联。复选框是动态生成的，如果您...

HTML 中的网格由于 <details>

我想要这个分数列表出现在我的页面上，开始做关于它的html css，但已经遇到了一个我找不到其他人遇到的问题。一切正常，直到我打开详细信息，然后......

如何为不同的媒体查询添加网格项标题？

我刚刚学会了如何使用CSS网格。我想将其应用于特定情况： 在大屏幕宽度上，我想要以下网格结构： # 标题1 标题2 标题3 1 值11 值12 值13 2 val21

自动调整网格元素的大小，以将网格保持在父 div 内

有没有一种方法可以自动调整网格元素的大小，以确保整个网格适合父级 div 且不会溢出？ 我一直在使用媒体查询和多个网格模板列