CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。
我有一个可以绘制卡片并显示文本的网页。文本和图像重叠。 我不知道如何使它们不与 FlexBox、网格 CSS 重叠。 var 对象； $(文档).ready(函数() ...
我使用循环为此选项卡创建了卡片，数据来自数据库。 当我单击“显示更多”按钮时，整个可见列都会随之展开。 它不显示内容...
当项目太多时如何解决内容溢出问题以及为什么媒体查询不起作用？
当我尝试媒体查询、Flex 和网格时，我遇到了两个问题。 溢出问题 我在堆栈溢出中搜索相关问题，但没有解决我的问题。当我做...
自动填充和自动调整之间的区别在于后者会折叠空列。 但是，在添加跨越所有列的项目后，自动调整会中断并开始表现得像自动填充一样。 ...
我有一个页面，根据用户设置可以有两种样式： 款式一： 分区 > 分区 { 书写模式：垂直rl； 文字方向：直立； } 。左边 { 背景颜色：lightgre...
CSS 网格，网格内的分隔符项目具有与网格项目不同的宽度和高度
我正在构建一个条目概述，我希望它看起来像这样： 我打算使用 CSS 网格布局。网格布局将利用可用宽度并使用不可用的空间......
我正在尝试使用 CSS 网格在每行之后制作一个边框底部，并将内容对齐到中心。我无法理解它。 我希望 .line 填充整个 .wrapper 容器的宽度....
我正在研究一个网格，其中前两个单元格从第 1 行跨越到第 2 行。但是它们并没有跨越整个高度。这里的任何项目都没有应用高度，一切都是自动的。
当CSS网格行切换到展开状态时，是否可以防止CSS网格行中的相邻列扩展到与其同级相同的高度？理想情况下我不必拆分 HTML
我很难跨越第二个方框来占据第二列和第三列。我已经检查过是否有错别字。在屏幕宽度为 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 显示网格是否可行，但我希望网格中的一行具有垂直溢出，而另一行则没有。 。容器 { 盒子大小：边框-...