CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。
我找到了几篇文章： https://melanie-richards.com/blog/css-grid-sticky/ https://ishadeed.com/article/position-sticky-css-grid/ 这解决了尝试使用位置时的“问题”：
使用flex box如何满足我的设计要求？ 设计要求 当前代码 如您所见，当前代码我已经沿着弹性框路径实现了我的设计要求但是，这......
我想让下面的 html 在 n 个相等的列中显示，无论使用 css 网格的行元素有两个、三个还是更多子元素 - Flexbox 使这很容易，但我无法完成它
我在CSS网格显示中有固定数量的列，以及要放入这些列中的元素。要放置的元素数量小于列数。 我希望这些列都是阿里的...
假设您收到以下 HTML： 假设您获得以下 HTML： <div class="grid"> <div class="sticky blue one" style="height: 50px !important"></div> <div class="red two"></div> <div class="green three"></div> <div class="orange four" style="height: 1500px !important;"></div> </div> ，其中网格提供两列；第一个元素生成两行，最后一个元素生成两列，如下所示： 如何在不更改 HTML 的情况下使蓝色元素具有粘性 (position: sticky)，但只能粘到橙色元素？ 网上有一些资源建议使用align-self，但我还没有找到可行的解决方案。 这是当前状态，蓝色元素滚动到橙色元素上： .grid { display: grid; width: 100%; gap: 1rem; background-color: aliceblue; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "one two" "one three" "four four"; } .grid>div { height: 500px; width: 100%; } .sticky { position: sticky; top: 5px; } /** * Placement */ .one { grid-area: one; } .two { grid-area: two; } .three { grid-area: three; } .four { grid-area: four; } /** * Colours */ .blue { background-color: blue; } .red { background-color: red; } .orange { background-color: orange; } .green { background-color: green; } <div class="grid"> <div class="sticky blue one" style="height: 50px !important"></div> <div class="red two"></div> <div class="green three"></div> <div class="orange four" style="height: 1500px !important;"></div> </div> 这里有一个 codepen 的链接：https://codepen.io/BernhardWebstudio/pen/mdQZMwW 您考虑过使用 z-index 吗？ .one { grid-area: one; z-index: 1; // Add this } .four { grid-area: four; z-index: 50; // And add this } 这样蓝色网格就会隐藏在橙色元素下面。这不是一个非常漂亮的解决方案，但在不更改 html 的情况下无法真正思考任何事情......
有一个部分包含人们的感言。我希望它们位于 CSS 网格中，每个网格元素的大小基于其内容，并且所有元素都相互环绕。 有没有这样的
我将通过 css-grid 创建一个具有动态图像数量的布局，但我有一个问题，我希望前 10 个图像能够被创造性地设计，而后面的图像我想要 h ...
我正在系统中构建标签列表，这些标签应显示在具有三列的 CSS 网格中。所以，像这样： 阿尔法 太棒了... 我正在系统中构建标签列表，这些标签应显示在三列的 CSS 网格中。所以，像这样： <ul> <li>Alfa</li> <li>Bravo</li> <li>Charlie</li> <li>Delta</li> <li>Echo</li> <li>Foxtrot</li> </ul> ul { display: grid; grid-template-columns: 1fr 1fr 1fr; } 在浏览器中查看此内容时，项目的排序如下： Alfa Bravo Charlie Delta Echo Foxtrot 但是，我希望它们是这样订购的： Alfa Charlie Echo Bravo Delta Foxtrot 所以，基本上是从上到下排序，而不是从左到右。 有什么方法可以简单地做到这一点吗？我已经尝试过使用 :nth-child 选择器和 grid-column，但这并不能真正达到我想要的效果。我可能可以用 Javascript 解决这个问题，但我想知道是否有纯 CSS 的解决方案。 我建议您为此使用列而不是网格列 ul{ columns: 3 } <ul> <li>Alfa</li> <li>Bravo</li> <li>Charlie</li> <li>Delta</li> <li>Echo</li> <li>Foxtrot</li> </ul> 祝你有美好的一天！ 我对此只做了简短的研究。 看起来grid-auto-flow: column（https://www.w3schools.com/cssref/pr_grid-auto-flow.php）可以满足您的要求。 你可以试试这个： <ul style="display: grid; grid-template-columns: 1fr 1fr 1fr;"> <li>Alfa</li> <li style="grid-row: 2; grid-column: 1;">Bravo</li> <li style="grid-row: 1; grid-column: 2;">Charlie</li> <li style="grid-row: 2; grid-column: 2;">Delta</li> <li style="grid-row: 1; grid-column: 3;">Echo</li> <li style="grid-row: 2; grid-column: 3;">Foxtrot</li> </ul> 如果你想有一个单独的 CSS 页面，请为每个 li 指定一个特定的类名称，例如 li1、li2、li3 等，然后像我上面所做的那样设置它们的 CSS 属性。 例如： li2{ grid-row:2; grid-column:1 }
我试图将光标悬停在我网站上的 SVG 上时更改为指针。但由于某种原因，当我在它们之间跳转时，光标看起来很奇怪。任何想法可能会导致......
我一直在尝试制作一个 3 列和 2 行的响应式网格，但由于某种原因，当屏幕尺寸减小时它不会调整大小。我希望容器缩小，但它只是保持相同的大小......
我有一个使用网格模板列自动填充的网格。即使网格是自动填充的，有没有办法选择每行的每个第一个元素。也就是说，我有以下 CSS：...
我在使用 CSS 网格的 Angular 15 组件中。当网格只有一行时，网格底部与“服务部分”底部相同。当我有多于一行时，网格会延伸到 b 之外...
在使用 CSS 网格的 Angular 15 组件中。当网格只有一行时，网格底部与“服务部分”底部相同。当我有多于一行时，网格会延伸到底部之外......
我有两个具有相同宽度的两列的卡片的示例。 上卡是用flexbox实现的。下层卡片带有网格。 然而，在 Safari 中，网格示例会推动左列...
我向 HTML 页面添加了一些子标题，但子标题导致列显示不正确，如此图所示。 我已经尝试过在子标题上显示块，但我认为...
文字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>
我想将a的基线与c对齐。 ＃网格{ 显示：网格； 网格模板列：1fr 1fr； 对齐项目：基线； } ＃A{ 网格行：1 / 跨度 2； 网格列：1； 内边距：8px； 背景...
我有一个代表井字游戏的 CSS 网格。我只想在网格内添加边框。今天，我是这样进行的： ：根 { --border: 2px 虚线 #393939; --符号颜色：#
不确定这是否可行，但我想要一个CSS网格模板，其中每第N行（例如每第三或第四行）会将单元格合并为一个......例如，这是一张照片，我的哇...
我可以用flexbox制作这个结构吗？ 下面我用网格给出了一个例子，但我想用弹性盒来做这个。 。容器 { 显示：网格； 网格模板列：自动自动自动； 差距...