CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。
在此演示中，CSS 网格容器 div 中有两个 div。是否可以将它们居中，以便第二个项目位于第一个项目的内部和顶部，并且两者都垂直居中并且
我有一个简单的网格设计（请参阅下面的代码片段，请确保以全屏方式观看），并且希望只要通过滚动未满足主元素的高度，旁边元素就会保留。 旁白-
我想包装我的列表，同时使其适合内容，如下所示： 问题是每个元素必须适合其内容的宽度。 我已经找到了如何包装
我正在开发一个布局非常简单的页面 - 基本上是一个数据表，但使用网格布局，以便列可以根据内容大小很好地调整。我想让行可排序...
我有一个 CSS 网格，它具有基于可用空间的动态列数，实现如下： .my-网格{ 显示：网格； 网格模板列：重复（自动调整，8em）； } 因为我正在使用...
我几天来一直在尝试创建一个简单的（纸上）布局，但我无法获得我真正想要的东西。 这是我当前的代码： 我几天来一直在尝试创建一个简单的（纸上）布局，但我无法获得我真正想要的东西。 这是我当前的代码： <div class="mx-auto inline-flex items-center gap-8"> <!-- Left part --> <div> <div class="flex snap-x snap-mandatory gap-8 overflow-x-auto py-4 child:snap-start" > <div class="flex min-w-full flex-col gap-4 rounded-3xl bg-gray-700 p-8"> <h3 class="text-xl font-medium">My card 1 title: a short text</h3> <p class="text-lg text-gray-200"> This is a long description text that takes about two lines on a regular 1080p screen </p> </div> <div class="flex min-w-full flex-col gap-4 rounded-3xl bg-gray-700 p-8"> <h3 class="text-xl font-medium">My card 2 title: a short text</h3> <p class="text-lg text-gray-200"> This is a long description text that takes about two lines on a regular 1080p screen </p> </div> <div class="flex min-w-full flex-col gap-4 rounded-3xl bg-gray-700 p-8"> <h3 class="text-xl font-medium">My card 3 title: a short text</h3> <p class="text-lg text-gray-200"> This is a long description text that takes about two lines on a regular 1080p screen </p> </div> </div> </div> <!-- Right part --> <div class="aspect-square self-stretch"> <div class="relative flex h-full w-full items-center justify-center rotate-12" > <div style="transform: translateY(-40%);" class="group absolute flex aspect-square h-1/2 items-center justify-center rounded-full bg-gray-400/75 transition-all duration-700 hover:bg-gray-600 hover:scale-105" > <img src="https://picsum.photos/200?random=1" alt="Card 1 icon" class="w-1/2 transition-all duration-700 -rotate-12 group-hover:fill-dominant group-hover:scale-105" /> </div> <div style="transform: translate(-45%, 40%);" class="group absolute flex aspect-square h-1/2 items-center justify-center rounded-full bg-gray-400/75 transition-all duration-700 hover:bg-gray-600 hover:scale-105" > <img src="https://picsum.photos/200?random=2" alt="Card 2 icon" class="w-1/2 transition-all duration-700 -rotate-12 group-hover:fill-dominant group-hover:scale-105" /> </div> <div style="transform: translate(45%, 40%);" class="group absolute flex aspect-square h-1/2 items-center justify-center rounded-full bg-gray-400/75 transition-all duration-700 hover:bg-gray-600 hover:scale-105" > <img src="https://picsum.photos/200?random=3" alt="Card 3 icon" class="w-1/2 transition-all duration-700 -rotate-12 group-hover:fill-dominant group-hover:scale-105" /> </div> </div> </div> </div> 现状 左侧部分没问题，但我无法正确定义右侧部分的尺寸。目前，它的大小是 0x0（没有 self-stretch）。我希望它的高度与左侧部分（或其容器）相同，宽度与其高度相同（aspect-square）。 我想要的标准 我希望通过获得与左侧部分（或容器）相同的高度来动态调整右侧部分的大小，并通过其比例定义宽度 它必须保持这个方形布局（宽度==高度，因此aspect-square） 左边的部分可以任意长 两个部分不得具有相同的宽度，每个部分都应合适（参见上面的规则） 容器可以是网格或弹性盒，没关系，哪个效果最好 我尝试过的事情 具有自动流动的网格（导致偶数列） 网格左侧为 2/3，右侧为 1/3（最接近我想要的，但不够动态） Flexbox（右侧部分的大小为0x0） self-stretch对于右边的部分，我最近发现，但是尽管高度设置正确，宽度还是0 我并不完全清楚这里的目标是什么，但据我了解，现在的问题是左侧容器与右侧容器的高度不同。 我建议使用 grid 而不是 flex，因为 grid 关心高度，而 flex 不关心。 这是我对更改代码以解决您遇到的问题的看法。 顺风游乐场 我在右列添加了最小宽度，告诉它占用一些空间，您可以调整它以满足您的需要。希望这可以帮助你。祝你有美好的一天！
我有一个两行三列的网格，如下图所示。 我对网格使用以下 CSS 属性： .网格容器{ 显示：网格； 网格模板列：20vw 60vw
我想制作一个类似仪表板的视图，我使用 CSS 网格布局作为基础。我想要 16 列分布在整个屏幕长度上（应该是响应式的）。然后c...
.网格{ 显示：网格； 网格模板列：重复（3，1fr）； 网格模板行：100px； 网格自动行：60px； 网格间隙：15px； } .col { 背景颜色：番茄； } .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-auto-rows: 60px; grid-gap: 15px; } .col { background-color: tomato; } <div class="grid"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> 这将创建 2 行，第一行高度为 100 像素，第二行高度为 60px 自动创建。第二行中有 2 列的宽度为 1fr。 是否可以通过 CSS Grid/Flexbox 将第二行中的 2 列水平居中？ IE。每行有不同数量的列。 我一直在尝试解决浏览器中 CSS 网格框架的一个简单用例。如果您使用 Flexbox 构建网格，那么实现这一目标非常简单。 但是我可以用 CSS Grid 实现它吗？ 这是我想要实现的目标的 CodePen 演示。 你问这个： CSS 网格中每行的列数可以不同吗？ 但是你却说： 是否可以通过 CSS Grid/Flexbox 在第二行中水平居中 2 列？ 看起来您陷入了经典的XY问题：您专注于您的尝试的解决方案而不是您的实际问题。 是的，可以在 CSS 网格中将列（以及网格项和内容）居中。 （请参阅此处的各种方法：CSS 网格居中） 不，在 CSS 网格或任何与此相关的网格中，每行不可能有不同数量的列。否则，你就没有网格。 由于布局中外观通常是最重要的，因此您可以使用 CSS 网格构建看起来像第一行中的三个“列”和第二行中的两个“列”的内容（居中）。 在下面的示例中，我将网格容器中的水平空间划分为 12 列。然后，我使用 Grid 的基于线的放置功能来定位项目并调整其大小。 .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 40px; grid-gap: 10px; } .col:nth-child(-1n + 3) { grid-column: span 4; } .col:nth-last-child(2) { grid-row-start: 2; grid-column: 3 / span 4; } .col:nth-last-child(1) { grid-row-start: 2; grid-column: 7 / span 4; } .col { background-color: tomato; }<div class="grid"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> codepen 演示 这是使用 Firefox DevTools 的样子： 如果您的行具有不同数量的单元格，并且这些单元格并未全部布局在单个二维（行和列）空间上，则您没有网格。根据定义，网格包含固定数量的行和列，以及跨越一个或多个行和列的单元格。也许你有多个异构网格，每行一个，但这实际上违背了网格的全部意义。 如果您的不同行数是对称的或遵循某种模式，您可以遵循 Michael_B 的建议，即基于公分母构建网格并以马赛克样式填充网格区域。这与目前的 Flexbox 解决方案一样重要，但是一旦更多的浏览器实现了 flexbox 碎片化，Flexbox 应该成为比网格更明显的选择。 你总是可以这样尝试： .container { display: grid; grid-gap: 10px; grid-template-columns: [col] 100px [col] 100px [col] 100px [col] 100px; grid-template-rows: [row] auto [row] auto [row]; background-color: #fff; color: #444; } .col { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; } .a { grid-column: col / span 2; grid-row: row; } .b { grid-column: col 3 / span 2; grid-row: row; } .c { grid-column: col; grid-row: row 2; } .d { grid-column: col 2 / span 3; grid-row: row 2; } .e { grid-column: col / span 4; grid-row: row 3; }<div class="container"> <div class="col a">A</div> <div class="col b">B</div> <div class="col c">C</div> <div class="col d">D</div> <div class="col e">E</div> </div> CodePen：https://codepen.io/anon/pen/MOLrvq 您可以通过嵌套网格来解决这个问题。 Grid-1（覆盖整个区域） Grid-2（覆盖第 1 行） 网格 3（覆盖行 2） 通过此设置，您可以缩短 row-2 的宽度。 如果有人遇到同样的麻烦，这就是我的解决方法。我在一个容器内有两个 div，并希望它们具有不同的列。所以我只是为每个 div 制作了一个网格。我输入了 1fr 行，然后输入了我想要的列数。它就像一个魅力。 这是我关于堆栈溢出的第一个答案，我很长一段时间对此表示感谢。我试图解决这个问题，但不幸的是，有人以不同的方式说它，我在子元素中使用网格实现了这一点，幸运的是它有效，所以我非常高兴与大家分享。感谢所有贡献者 .container { display: grid; grid-template-columns: 1fr 2fr; gap: 5px; } .item { background-color: aqua; height: 120px; } .item5 { display: grid; grid-column: 1 / span 2; grid-template-columns: 1fr 1fr; /* Divide item5 into 2 equally sized columns */ } .item5 > div { background-color: aqua; height: 310px; margin-right: 5px; /* Add margin for gap effect */ }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="grid.css"> <title>Grid</title> </head> <body> <div class="container"> <div class="item item1"><h1>hello World</h1></div> <div class="item item2"><h1>hello World</h1></div> <div class="item item3"><h1>hello World</h1></div> <div class="item item4"><h1>hello World</h1></div> <div class="item5"> <div> <h1>hello World 5</h1> </div> <div> <h1>hello World 5.5</h1> </div> </div> <div class="item item6"><h1>hello World</h1></div> <div class="item item7"><h1>hello World</h1></div> <div class="item item8"><h1>hello World</h1></div> <div class="item item9"><h1>hello World</h1></div> <div class="item item10"><h1>hello World</h1></div> </div> </body> </html> 强文字
.容器{ 显示：柔性； 间隙：5px； 边框颜色：#f56565； 最小高度：0； 最小宽度：0； 边框：5px实心蓝紫色； 背景：#000； 对齐项目：弹性开始； } 。孩子 { 边框-
我找到了几篇文章： 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 行的响应式网格，但由于某种原因，当屏幕尺寸减小时它不会调整大小。我希望容器缩小，但它只是保持相同的大小......