css-grid 相关问题

CSS Grid Layout是一种允许创建网格的W3C技术。它不需要使用浮动，表格，绝对定位甚至flexbox（另一种CSS3技术）来构建各种网格，从简单到复杂。一般情况下，请勿将此标记用于CSS网格系统。

使 CSS 网格占据另一行（单独的）重叠 CSS 网格

我有一个布局，其中文本介绍与第一个产品网格项目内联。然后产品网格的其余部分应该包裹在下面。但是，在移动设备上，我需要将这些项目分开，因为

html css flexbox css-grid

回答 1 投票 0

在这种情况下如何添加内容？

所以我试图为一家企业建立一个登陆页面，但我无法添加内容，因为 div 从太远的地方开始。但奇怪的是，它在侧边栏处于活动状态时起作用......

javascript html css css-grid

回答 1 投票 0

如何使用 CSS Grid 在跨越多行的列上设置不确定的高度？

我正在使用 Tailwind CSS 并尝试使用如下所示的网格布局：我在 Div 1 中有一些仪表板类型的指标。现在，当我向 Div 2 添加一个很长的有序列表时，出于某种原因，...

html css tailwind-css css-grid

回答 1 投票 0

Grid 属性不起作用，因为代码不是网格表格格式

我正在尝试为我的 Freecodecamp 项目构建一个基本的作品集，但我无法错误地理解为什么网格属性不起作用。这是代码 HTML: ... 我正在尝试为我的 Freecodecamp 项目构建一个基本的作品集，但我无法错误地理解为什么网格属性不起作用。这是代码 html: <section id='projects'> <h2>Here are some of my Projects:</h2> <div id="projects-grid"> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image> <p class='project-title'>Tribute page</p></a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image> <p class='project-title'>Tribute page</p></a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image> <p class='project-title'>Tribute page</p></a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image> <p class='project-title'>Tribute page</p></a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image> <p class='project-title'>Tribute page</p></a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></image> <p class='project-title'>Tribute page</p></a></div> </div></section> CSS： #projects{ padding:3rem 2rem; width:100%; height:120%; background-color:#3c6382; } #projects h2{ text-align:Center; text-decoration:underline; color:#c8d6e5; font-size:2rem; } .img{ margin-top:4rem; width:40%; border:0.5rem solid white; } .project-title{ color:white; font-size:1.5rem; margin-left:4rem; } #projects-grid{ display:grid; grid-template-columns:repeat(autofit,minmax(320px,1fr)); } type here 这是我希望我的输出格式，但它不会在网格上 CSS 代码看起来是正确的，但是HTML 代码中的img 标签存在语法错误。不要使用 </image> 来关闭标签，而是使用 </img>。这是核心代码 HTML <section id='projects'> <h2>Here are some of my Projects:</h2> <div id="projects-grid"> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img> <p class='project-title'>Tribute page</p> </a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img> <p class='project-title'>Tribute page</p> </a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img> <p class='project-title'>Tribute page</p> </a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img> <p class='project-title'>Tribute page</p> </a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img> <p class='project-title'>Tribute page</p> </a> <a href=""> <img src="https://www.aljazeera.com/wp-content/uploads/2022/12/SSS10784_1.jpg?resize=1920%2C1440" class="img"></img> <p class='project-title'>Tribute page</p> </a> </div> </section>

html css css-grid

回答 1 投票 0

如何使 CSS 网格中只有顶行的高度比其他行高？

为这个垂直表使用 css 网格，我希望顶行高度比其他行大。我怎样才能做到，例如，100px？我相信 grid-template-rows: repeat(4, 25px);控制

html css css-grid

回答 2 投票 0

在小屏幕上垂直布局一些网格列

我有一个看起来像这样的表格：我已经使用 CSS 网格对其进行了布局：我有一个看起来像这样的表格：我已经使用 CSS 网格对其进行了布局： <div style="display: inline-grid; grid-template-columns: auto auto auto auto"> <div><input></div> <div><input></div> <div><input></div> <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div> <div><input></div> <div><input></div> <div><input></div> <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div> <div><input></div> <div><input></div> <div><input></div> <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div> </div> 在小屏幕上，我希望布局更改为：但我不知道如何更改 CSS 网格以获得此布局，如果可能的话。简单地让那些有<div>的<input>跨越3列，那些没有跨越3行并确保网格尽可能密集： #container { grid-auto-flow: dense; } @media (max-width: 768px) { #container > :not(:nth-child(4n)) { grid-column: 1 / -2; } #container > :nth-child(4n) { grid-column-start: 4; grid-row-end: span 3; } } 试试看： #container { display: inline-grid; grid-template-columns: repeat(4, auto); grid-auto-flow: dense; } #container > :nth-child(4n) { font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px; } @media (max-width: 768px) { #container > :not(:nth-child(4n)) { grid-column: 1 / -2; } #container > :nth-child(4n) { grid-column-start: 4; grid-row-end: span 3; } } <div id="container"> <div><input></div> <div><input></div> <div><input></div> <div>⊖</div> <div><input></div> <div><input></div> <div><input></div> <div>⊖</div> <div><input></div> <div><input></div> <div><input></div> <div>⊖</div> </div>

css responsive-design css-grid

回答 1 投票 0

CSS 网格自动流重新排序项目

我正在尝试创建一个自动流组件以根据屏幕尺寸重新排列内容。内容块总是成对出现：文本框和图像。在桌面设备上，我想要布局...

css css-selectors css-grid

回答 2 投票 0

CSS 网格使 iframe 无响应

我正在尝试使用 CSS 网格线在我的 HTML 页面（Chrome 浏览器）上组织一个嵌入式 iframe 视频。然而，似乎网格区域正在“覆盖” iframe，使其如此......

html css iframe css-grid responsive

回答 0 投票 0

CSS 网格：居中内容和左对齐文本

我认为这里应该有一个简单的解决方案，但我找不到它。我想重新创建类似下图的内容：请注意项目和数量行如何在详细信息下方居中