CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。
我很难跨越第二个方框来占据第二列和第三列。我已经检查过是否有错别字。在屏幕宽度为 1024px 之前，我的页面看起来很棒。下面是我的 html 页面和样式表 我很难跨越第二框来占据第二栏和第三栏。我已经检查过是否有错别字。在屏幕宽度为 1024px 之前，我的页面看起来很棒。下面是我的 html 页面和样式表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="box"> <img src="css/images/blackberries.jpg" alt="blackberries"> </div> <div class="box box-two"> <img src="css/images/brunch.jpg" alt="brunch"> </div> <div class="box"> <img src="css/images/utensils.jpg" alt=" cooking utensils"> </div> <div class="box"> <img src="css/images/blackberries.jpg" alt="blackberries"> </div> <div class="box"> <img src="css/images/brunch.jpg" alt="brunch"> </div> <div class="box"> <img src="css/images/utensils.jpg" alt=" cooking utensils"> </div> <div class="box"> <img src="css/images/blackberries.jpg" alt="blackberries"> </div> </div> </body> </html> 我的样式表如下。我认为问题出在我的样式表中，但我很难确定是。 .container { display: grid; grid-template-rows: repeat(auto, 10rem); grid-template-columns: repeat(1, 10rem); gap: 10px; } img { width: 10rem; height: 10rem; } @media screen and (min-width:768px) { .container{ display: grid; grid-template-columns: repeat(2, 10rem); } } @media screen and (min-width:1024px) { .container{ display: grid; grid-template-columns: repeat(3, 10rem); grid-template-rows: repeat(4, 10rem); } .box-two { grid-column: span 2 ; } } 我尝试过 grid-column: 2 / 4 和 grid-column 命令的其他变体，但它只是添加了额外的列，而不让 box-two 占用多列。我的代码没有出现任何错误，并且我尝试查看是否在其他地方遗漏了任何内容。 我认为你的 CSS 可以按原样工作，但是当你的图像跨越多列时，它不会填充整个单元格，因此它看起来不起作用。 如果运行下面的代码片段（并全屏打开以获取相关布局），您可以看到 box-two 确实 跨越两列，但您的图像仍然是 width: 10rem，因此它不会增长。 .container { display: grid; grid-template-rows: repeat(auto, 10rem); grid-template-columns: repeat(1, 10rem); gap: 10px; } img { width: 10rem; height: 10rem; visibility: hidden; /* hiding the images for clarity about the grid */ } .box { border: 1px solid red; /* so we can see the grid cells */ } @media screen and (min-width:768px) { .container{ display: grid; grid-template-columns: repeat(2, 10rem); } } @media screen and (min-width:1024px) { .container{ display: grid; grid-template-columns: repeat(3, 10rem); grid-template-rows: repeat(4, 10rem); } .box-two { grid-column: span 2; background: tomato; /* to accentuate this box */ } } <div class="container"> <div class="box"> <img src="css/images/blackberries.jpg" alt="blackberries"> </div> <div class="box box-two"> <img src="css/images/brunch.jpg" alt="brunch"> </div> <div class="box"> <img src="css/images/utensils.jpg" alt=" cooking utensils"> </div> <div class="box"> <img src="css/images/blackberries.jpg" alt="blackberries"> </div> <div class="box"> <img src="css/images/brunch.jpg" alt="brunch"> </div> <div class="box"> <img src="css/images/utensils.jpg" alt=" cooking utensils"> </div> <div class="box"> <img src="css/images/blackberries.jpg" alt="blackberries"> </div> </div> 这可能不是解决方案，但只是为了说明：添加此规则将允许图像放大并填充整个宽度： .box-two img { width: 100%; height: auto; } 尝试使用精确的 CSS 网格属性（例如 grid-column-start 和 grid-column-end）以更好地控制放置。
我有以下弹性组件： ul { 显示：柔性； 弯曲方向：行； 间隙：8px 32px； 弹性包裹：包裹； } 李{ 弹性基础：计算（33% - 32px）； } 托尼和 我有以下弹性组件： ul { display: flex; flex-direction: row; gap: 8px 32px; flex-wrap: wrap; } li { flex-basis: calc(33% - 32px); } <ul> <li>Toni and Dwight Beavers</li> <li>Debra Coleman</li> <li>Ashley Dwight</li> <li>Paul and Madeline Green</li> <li>Jon and Allison Kelly</li> <li>Samar and William Longjohnson</li> <li>J. May Liang and James Linament</li> <li>Timothy R. Landry</li> <li>Carrie and David Mason</li> <li>Luke Frazier and Robert Peters</li> <li>Mei Xu and Allessandro Reiner</li> <li>Jennifer and Jimmy Revesi</li> <li>Cinthia and Horacio Rozalyn</li> <li>Margarita Arroyave-Wessel and David Wemmer, MD</li> <li>Angela and Kyle Westberger</li> <li>Linda D. Rabbitt and John Wheaton</li> <li>Kathie and Mike Wiener</li> <li>Rochdi Young</li> </ul> 它看起来应该是这样的，但它从左到右流动，而客户希望它向下流动，以便每列按字母顺序向下排列。 我尝试使用第 3 列来执行此操作。 ul { columns: 3 } li { padding-bottom: 8px; padding-right: 32px } <ul> <li>Toni and Dwight Beavers</li> <li>Debra Coleman</li> <li>Ashley Dwight</li> <li>Paul and Madeline Green</li> <li>Jon and Allison Kelly</li> <li>Samar and William Longjohnson</li> <li>J. May Liang and James Linament</li> <li>Timothy R. Landry</li> <li>Carrie and David Mason</li> <li>Luke Frazier and Robert Peters</li> <li>Mei Xu and Allessandro Reiner</li> <li>Jennifer and Jimmy Revesi</li> <li>Cinthia and Horacio Rozalyn</li> <li>Margarita Arroyave-Wessel and David Wemmer, MD</li> <li>Angela and Kyle Westberger</li> <li>Linda D. Rabbitt and John Wheaton</li> <li>Kathie and Mike Wiener</li> <li>Rochdi Young</li> </ul> 这会按正确的顺序对它们进行排序，但不再定义行，并且元素不会像使用 flex 时那样水平对齐。 有什么办法可以两者兼得吗？无论是使用 Flex、列还是网格，我只想让它看起来与 Flex 相同（对齐行，所有元素在类似网格的外观中保持平衡），但沿着列向下流动而不是横向流动。就像下图一样，我通过将高度硬编码到每个 li 元素上来手动实现 CSS-Grid 可以通过定义的行数来管理。 ul { padding: 0; margin: 0; list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, 1fr); } li { padding: .25em; border: 1px solid grey; margin-bottom: .25em; } <ul> <li>Toni and Dwight Beavers</li> <li>Debra Coleman</li> <li>Ashley Dwight</li> <li>Paul and Madeline Green</li> <li>Jon and Allison Kelly</li> <li>Samar and William Longjohnson</li> <li>J. May Liang and James Linament</li> <li>Timothy R. Landry</li> <li>Carrie and David Mason</li> <li>Luke Frazier and Robert Peters</li> <li>Mei Xu and Allessandro Reiner</li> <li>Jennifer and Jimmy Revesi</li> <li>Cinthia and Horacio Rozalyn</li> <li>Margarita Arroyave-Wessel and David Wemmer, MD</li> <li>Angela and Kyle Westberger</li> <li>Linda D. Rabbitt and John Wheaton</li> <li>Kathie and Mike Wiener</li> <li>Rochdi Young</li> </ul>
网格列似乎不适用于我的文章元素，但适用于我的导航。 CSS /*sm-md*/ @媒体屏幕和（最大宽度：768px）{ .signup-btn, .login-btn{ 字体大小：1.4em！导入...
我想使用 CSS 网格作为我的应用程序的主要布局，并且我正在努力寻找正确的公式 这是我想要实现的设计的结构（这里是Stackbliz） 整个设计...
Material UI ButtonGroup 样式道具不反映
我有一个产品图像和关联的按钮显示在网格容器内。按钮根据某些状态变量有条件地呈现。基本上如果产品数量为0，就...
我正在尝试使用顺风布局一些搜索结果卡。这些卡片使用 css 网格排列，而卡片内的内容（标题图像、标题和一些元数据）则由我们布置...
在我的 React 组件中，我尝试（第一次）使用 CSS 网格布局。该列应该跨越 2，但实际上只有 1： < Value textAlign="right" gridCol={1} gridRow={index + 3} weight={'regular...
我从这个合理的图片库开始，它似乎工作得很好。 .画廊{ 显示：柔性； 弯曲方向：行； 弹性包裹：包裹； 间隙：5px； } 。孩子 { 弹性：1 1 自动； } .孩子...
通过重复（自动调整）自动调整网格列大小，同时让网格单元跨越 2 列或更多列
我想使用 CSS 网格创建响应式布局，其中网格子元素的大小可变。为了使网格响应，我想我应该使用 grid-template-columns: Repeat(auto-fit, minmax(min-si...
我正在使用 Tailwind CSS 进行布局，该布局涉及具有固定标题和主要内容区域的网格结构。主要内容区分为左、中、右三部分...
我不确定 CSS 显示网格是否可行，但我希望网格中的一行具有垂直溢出，而另一行则没有。 。容器 { 盒子大小：边框-...
分数与百分比有何不同？下面的代码有什么不同吗？ 网格模板列：1fr 1fr 1fr 1fr； 网格模板列：25% 25% 25% 25%； 它们在视觉上看起来...
我认为这是一个常见问题，但仍然找不到答案。请看一下小提琴： 身体 { 保证金：0； } 。网格 { 显示：网格； 网格自动流：列； 网格自动列：...
我有一个父div，在父div内我有3个子div。 第一 我有一个父div，在父div内我有3个子div。 <div class="parent"> <div class="child1">First</div> <div class="child2">Second</div> <div class="child3">Third</div> </div> 对于家长，我已经写了下面的样式。 .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; } 期望是 Second First Third 您可以使用 css order 属性： 例如通过放置order: -1，该项目将被放置在开头 下面的工作示例 .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; } .child2 { order: -1 /*Moves it to the first place*/ } <div class="parent"> <div class="child1">First</div> <div class="child2">Second</div> <div class="child3">Third</div> </div> 对子项使用 order 参数： .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; } .child1 { order: 2; } .child2 { order: 1; } .child3 { order: 3; } <div class="parent"> <div class="child1">First</div> <div class="child2">Second</div> <div class="child3">Third</div> </div>
我在这里查看了其他示例，但找不到可以实现此目的的示例。我希望侧边栏（部分）在页面滚动时保持粘性。位置：如果我把它放在上面，粘性就起作用了...
我想做的是制作一个具有动态数量的单元格的 CSS 网格。为了简单起见，我们假设每行始终有四个单元格。我可以指定一个具有如此动态麻木的网格吗...
getBoundingClientRect() 给出的是父元素而不是目标元素的尺寸
我对网页设计相当陌生，所以提前道歉。我有一个简单的网站网格布局。其中一个单元格内部是一张带有 object-fit: contains 的图像，以使其具有响应能力。 我正在尝试...
我有以下html结构。 孩子2 我有以下 html 结构。 <div class="grandparent"> <div class="parent"> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> </div> <div class="achild1">Child 1</div> </div> .parent { display: grid; grid-template-columns: subgrid; grid-column: span 6; background-color: lightblue; padding: 10px; } .grandparent { display: grid; grid-template-columns: repeat(12, 1fr); /* 12 columns */ gap: 10px; background-color: lightgreen; padding: 20px; } .achild1 { background-color: lightpink; height: 50px; padding: 20px; } .achild2 { background-color: lightyellow; height: 50px; border: 2px solid red; padding: 10px; } 达到以下效果 问题是child1的数量是动态的，并且每个可能跨越可变数量的列。因此无法指定 parent SPAN。 我可以在 display: contents 上使用 parent，效果很好。我想知道如何使用 SUBGRID 达到相同的效果 用于实验的 codepen 链接： https://codepen.io/rsun2100/pen/GRebbvJ 您可以修改 .parent 类以利用子网格进行布局。 .parent { display: grid; grid-template-columns: subgrid; /* Use subgrid */ background-color: lightblue; padding: 10px; } .grandparent { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; background-color: lightgreen; padding: 20px; } .achild1 { background-color: lightpink; height: 50px; padding: 20px; } .achild2 { background-color: lightyellow; height: 50px; border: 2px solid red; padding: 10px; } HTML： <div class="grandparent"> <div class="parent"> <div class="achild1">Child 1</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> <div class="achild2">Child 2</div> </div> <!-- Remove the direct child1 div --> </div> 这将允许 .parent 网格使用子网格与 .grandparent 网格的列对齐。
如何使用特定的div来测量Bootstrap的断点？ [已关闭]
Bootstrap 5 能否为可以拖动相互垂直边框的两列提供响应式布局？答案：是的，通过重新配置 Bootstrap 以使用容器查询而不是媒体查询。
如果我有这样的列表怎么办： a b c d e f &... 如果我有这样的列表怎么办： <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> 并且想要这样的渲染： a | e | i b | f | c | g | d | h | 我的意思是，分成几列但尊重“垂直”字母顺序？此外，柱子的“高度”应与可用空间一样高。所以没有像上面那样固定 4 行。也没有固定高度的容器。 可能吗？我知道我可以使用 Flexbox 来做到这一点，但要固定容器的高度。我也查看了网格规格，但不确定是否有可能。 有什么想法吗？ 尝试这样的 CSS 网格： ul { margin: 0; padding: 0; list-style:none; height: 100vh; display: grid; grid-template-rows: repeat(auto-fit, 1.2em); /* define the heoght of one row here */ grid-auto-flow: column; font-size: 50px; } body { margin: 0; } <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> 您还可以将 column-count 与 column-fill: auto 一起使用。 这样就可以达到不填写的效果了。 ul.example { column-count: 3; column-rule: 1px solid #dadbe1; column-gap: 3.7rem; column-fill: auto; /*balance*/ column-rule-color: #eaeaf1; column-width: auto; display: inline-block; height: 100vh; /*auto*/ margin: 0; padding: 0; width: 100%; } ul.example li { list-style: none; display: block; position: relative; break-inside: avoid; height: 25vh; } <ul class="example"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul> 我希望列表项向下传播（而不是向右）。 这对我有用： <style> .example { columns: 3; -webkit-columns: 3; -moz-columns: 3; } </style> <ul class="example"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> </ul>