css-grid 相关问题

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

如何摆脱网格之间的空白?

我正在制作网格,但是上部网格区域下方有一个空白区域。这是我指的空白。我正在使用70%30%的网格列模板创建模板。在...之下

回答 1 投票 0

仅使用HTML和CSS将图像(或任何元素)的高度限制为行高的倍数

忙于摆弄一阵子,试图弄清楚在没有太多运气的情况下这是否可能。我正在一个网站上,其中所有内容都安排在12px的严格背景网格内...

回答 1 投票 0

具有顶部栏,侧边栏和重复内容的CSS网格

我在使用CSS网格功能创建以下布局时非常困难,而且我不确定是否可能:我可以将网格顶部和右侧的条放在...内]

回答 1 投票 0

CSS网格使用min-content作为1 fr单位的基础

这是我正在处理的布局(https://codepen.io/tomaszal/pen/QWWJPRQ):正文{高度:calc(100vh-2rem);保证金:1雷姆;显示:网格;栅隙:1雷姆; grid -...

回答 4 投票 2


由css网格提供动力的“复杂”矩阵样式网格是否可能?

我目前正在尝试使用CSS网格在Material-UI中实现以下网格结构:所需的复杂布局我已经使用Material-UI创建了如下所示的CSS网格:当前...

回答 1 投票 1

如何使用网格使图像适合浏览器窗口?

我希望将图片放入可以缩放的网站中,但仍然可以正常工作,但是我的图片巨大,我似乎无法适应。我试图对包装器div进行限制(此处称为“ ...

回答 1 投票 0

CSS网格-可重复模板区域

我很感兴趣CSS Grid具有创建可重复的网格模板区域的功能吗?为了说明我创建的代码笔示例的功能,请参见https://codepen.io/vadjs_ru/pen/qBBJxLX在示例中,...

回答 1 投票 0

如何控制不同大小的网格项目之间的间隙?

在以下布局中,我希望将A和B并置,并且D强制的所有间隙都在B和C之间。Justify / align-content / self / items似乎没有任何作用。网格间隙也没有。 ...

回答 2 投票 0

简单的CSS网格项目无法在较小的视口上正常放置

我正在尝试使用CSS Grid。我创建了一个简单的四项网格,我希望第一个和最后一个元素跨所有列,而第二个元素仅跨一个列,并且...

回答 1 投票 1

为什么此文本未与我的CSS网格行垂直对齐?

我的网站将提供有关温度的信息,我希望能读出温度,后跟一个度数符号以及'C'或'F'。页面上还有关于...

回答 3 投票 1

避免HTML网格中的无效DIV

目的是为更大的屏幕插入侧边距,同时保持页眉跨越整个宽度。通常我们会写.inner {margin:0 5%; }来获得这种边距,但事实证明...

回答 1 投票 0

CSS网格和文本溢出:省略号

使用CSS网格时,即使将其应用于包含要缩短文本的dom对象,我似乎也无法设法使text-overflow:省略号起作用。 .grid {display:...

回答 1 投票 0

如何将奇数元素放在特定列的所有行上的偶数元素中,并将偶数元素放在另一列上?

因此,我正在尝试使用CSS为我的在线简历创建时间轴。我的计划是制作一个具有两个基本列和一个第三列的网格,以用于线条及其样式。我想放置每个...

回答 1 投票 0

希望有一个p元素来动态填充(通过文本大小)父div

我的ap元素具有大量文本(多行),并且我希望它自动填充父级div:在保留...的同时,文本应尽可能少地填充父级...

回答 1 投票 0

具有2个部分的嵌套网格显示不一致的行大小和元素重叠

我目前正在布置仪表板Web应用程序,并决定使用嵌套网格。这个想法是让网格显示27个原始数据和5个列。菜单(第一个子网格)应跨在第一列上...

回答 1 投票 0

网格格式提供了额外的空格

我正在创建一个包含三个页面的网站,其中两个页面的布局相同。对于两个显示之一:网格;工作正常,但在第二页上,即使我复制粘贴整个第一页,也是如此...

回答 2 投票 0

CSS-Grid:grid-template-rows auto在Safari,Firefox和Chrome中具有不同的结果

我正在尝试创建具有动态内容的响应式方格(灰色),其中图像(黄色)的缩放取决于文本的长度/图像(蓝色)下方内容div的高度... 。

回答 1 投票 1

网格项目的响应视图,使它们相互重叠

我创建了一个网格,该网格应成为YouTube播放器。 *,:: before,:: after {box-sizing:border-box; } body {padding:0;边距:0;字体家族:lato,sans -...

回答 1 投票 0

是否可能有一个CSS网格……增大它的高度以动态适应父容器? [重复]

这不是建议的类似问题的重复,因为其他问题未考虑网格容器。我正在尝试查看是否可以增加网格的高度来填充...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.