CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。
如何将 grid-template-rows 配置为仅 40px 大小的中间行
如何将 grid-template-rows 配置为仅 40px 大小的中间行？我一直在寻找并尝试不同的可能解决方案，却发现它们都不起作用。 我想要一个固定的页眉和页脚...
我试图在我的三个网格项目之间获得一些余量。我希望每个网格项占据容器宽度的 1/3。然而，间距和间隙支柱都无法帮助我实现这一目标......
我正在尝试在CSS3网格中创建一个覆盖层，但我似乎不知道如何实现它。我在网上搜索过但没有找到任何帮助。我想要实现一些目标...
我使用 css-grid 使用 HTML5 + CSS3 创建了以下同心圆结构。 我想将堆叠顺序更改为相反。 默认情况下，每个元素从左到
在我们的网站上，我们有一个简单的基于 BB 代码的编辑器来创建我们的帖子。为了能够创建基本网格，我添加了一个新标签，它是一个带有 display:grid 和 grid-template-columns 的简单包装器：
我已加载七件物品。我将编写逻辑，以便如果我隐藏这些项目，其他项目应自动与屏幕对齐 例如， 如果任务被删除（隐藏）该项目...
WordPress：如何在登陆页面上显示 x 帖子数量的最新帖子 - 匹配主题
在我的网站上，我想要一个登陆/主页和一个博客页面。我转到“设置”>“阅读”>“您的主页显示“静态页面””，然后选择我的主页和博客页面。 我的主题使用...
我目前正在处理网格项溢出父容器的问题。我不知道如何纠正这个问题。如果我调整视口大小，表单字段会溢出父容器，
我正在使用网格布局进行月视图，其中每周都是另一个网格布局。 对于每个事件，我使用类似 grid-column: 5/span 2; 的东西顶部：1rem；将事件分层在日历之上...
https://i.stack.imgur.com/z2yC7.png 这就是我的网格目前的样子。改变图片位置有效。 (pfp-div) 但我想更改文本位置 (profile-p-name-div)，并且...
我正在尝试创建一个 3 列 3 行（总共 9 个单元格）的网格。我希望网格是方形的，无论设备大小如何（响应式）。 我需要的理想网格： 我已经实现了以上...
我有一个计算变量CSS网格，其中每个项目都有一个属性“grid-row”和“grid-column”。在底部添加水平滚动条是没有问题的。 但我想滚动每一行
我不知道这是问这个问题的合适地方，我是一个 HTML 和 CSS 新手。我正在与 Wordpress.org 合作。问题是，我正在创建一个带有帖子网格的页面。我想要
我正在尝试在网格中垂直对齐图像。我正在使用带有图像标题的 HTML 元素。图像取代了复选框。 请参阅我的小提琴：https://jsfiddle.net/ 我正在尝试垂直对齐网格中的图像。我正在使用带有图像标题的 <figure> HTML 元素。图像取代了复选框。 请看我的小提琴：https://jsfiddle.net/mauricederegt/do6ne2xh/129/ 如您所见，4 个图像排成一行（这是正确的），但位于页面顶部。我希望它垂直居中（而且当添加另一行时，两行都应该在中间对齐）。我尝试过类似的事情： display: flex; align-items: center; 但似乎没有任何效果。我错过了什么？ 问题在于 div 的高度，在此之前我们应该照顾它的父级 body 以及更高的级别，html: 所以： html, body { height: 100%; } .grid { height: 100%; align-items: center; } 这是工作示例：https://jsfiddle.net/s9pyLe07/1/ 还有代码片段： html, body { height: 100%; } /* @media (min-width: 600px) { */ .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2%; padding: 1%; height: 100%; align-items: center; } /* } */ figure.item { border: 1px solid #000; /* To horizontally center images and caption */ text-align: center; margin: 0; padding: 0; } /* hack to make images flexible: width: 100%;*/ img { width: 100%; } .caption { /* visibility: hidden; */ } img, figcaption { transition-duration: 0.2s; transform-origin: 50% 50%; opacity: 0.5; } :checked+label img, :checked+label figcaption { opacity: 1; } input[type=checkbox] { display: none; } <div class="grid"> <figure class="item"> <input type="checkbox" id="1" class="box" /> <label for="1"> <img src="https://picsum.photos/seed/100/100" /> <figcaption>Text below the image1</figcaption> </label> </figure> <figure class="item"> <input type="checkbox" id="2" class="box" /> <label for="2"> <img src="https://picsum.photos/seed/100/100" /> <figcaption>Text below the image1</figcaption> </label> </figure> <figure class="item"> <input type="checkbox" id="3" class="box" /> <label for="3"> <img src="https://picsum.photos/seed/100/100" /> <figcaption>Text below the image1</figcaption> </label> </figure> <figure class="item"> <input type="checkbox" id="4" class="box" /> <label for="4"> <img src="https://picsum.photos/seed/100/100" /> <figcaption>Text below the image1</figcaption> </label> </figure> </div>
有没有办法让 css 网格元素拉伸到一定大小，但又表现得像将 justify-self 设置为结束？
我的网格容器中有两个元素。每个元素的最大宽度假设为 200px。我希望第一个元素拉伸以填充单元格高达 200 像素，但也坚持...的右边框
如果我使用CSS网格，我有一个内容区域，例如 网格模板区域： “bbaa” “bbaa” “bbaa” “b b a a”...