css-grid

2热度

1回答

我正在使用CSS网格来实现卡网格布局。但我不知道如何调整minmax()语句来处理没有足够的项目来填充行但仍然需要它们看起来像卡的用例！如果我用一个静态100px替换最大1fr值，或者我使用小数0.25fr，它会在较小的介质尺寸下打乱缩放比例。 .wrapper { display: grid; grid-template-columns: repeat(auto-

2热度

1回答

使用CSS Grid创建简单的CSS布局的问题集中了行和多个div

我是一位CSS Grid初学者，希望为我的个人博客创建一个简单的CSS布局。我想它内codepen.io codepen.io 什么，我想实现是有其有充分的宽度多行和这些行内有不同宽度的额外的div和父中心（行），也许还有不止一个原因，我需要让我们说一行中从上到下的10个div。但我卡住了，它不工作。我创建了我正在寻找的一个小图像。（底部链接）这是我的HMTL： <div class="con

1热度

2回答

可以在网格项目周围流动内容吗？

我奠定了一些内容与新的CSS布局网格模块。有几段是8列宽，我想补充一个figure这是宽3列，在1-3列，并且有它后面流入空间到figure右边的段落。这可能吗？在非网格世界中，我只需简单地将float:left;添加到figure即可。这是我想模仿的行为。我不知道在figure后面的段落会有多长，所以我不能说“下一个X段落占据4-8列”。这里有一个CodePen of a stripped

-1热度

1回答

试图在网格中粘贴图像

我使用1fr 1fr构建一个网格，并且它们中的每一个都是50％。在左边大小我想要HEADERS和P的在右边我想设置IMG。我希望图像将坚持屏幕在右边而左侧的大小将像一个页面。我该怎么做？这是我与图像右边框代码： ***css*** .grid > box2 { background-color: blue; border: 2.5px solid black; padding:

2热度

1回答

css网格响应卡没有水平扩展

我遵循CSS网格制作响应卡网格的指导原则，但网格只在页面上垂直显示卡，并且不会水平扩展以匹配浏览器的宽度。任何帮助真的会感激〜！退房代码笔在这里： https://codepen.io/synapse709/pen/aLdbPP .card_wrapper { display: grid; padding: 30px 28px; grid-templa

0热度

2回答

使用CSS Grid对齐div盒的问题

我想使用Grid和Hero图像为我的博客构建自定义WordPress。这是我的HTML： <div class="site-wrapper"> <div class="section site-menu">MenuItem 1 | MenuItem 2 | MenuItem 3 | MenuItem 4</div> <div class="section site-he

1热度

1回答

CSS网格 - 网格模板区域行为

我有一个网格模板区域定义的CSS网格。有人能告诉我为什么下面的模板不起作用吗？我期望看到等分的4x3网格。我有一个小提琴演示会发生什么，以及为可以工作的网格注释掉样式。我无法破译2之间的区别，以及为什么会出现这种情况。谢谢。 Fiddle .container { display: grid; width: 100%; height: 100%; grid-

0热度

1回答

如何根据此图像在CSS网格中完成响应式布局

我一直在使用CSS网格战斗3个多小时，需要您的帮助。我想建立一个简单的响应式网格，基于附加的图像为2卡和3卡布局。目前，我有移动工作，但在将桌面大小调整为平板电脑时，卡片重叠。任何帮助是极大的赞赏！ body { font-family: arial; } .btn_blue_large { display: block; text-

4热度

3回答

选择孩子的潜在无限列表的第n个孩子

我有一个网格布局 - 每行4列。我正在使用CSS网格布局。说可能有无数的项目。 <div class="grid"> <div class="item"></div> <div class="item"></div>  </div> 如果物品的数量可能无限，我如何选择每行的两个中间物品。例如，对于前三行，我需要选择： nth-child

-2热度

1回答

Css Grid列的堆叠在彼此之上

我知道我的HTML和CSS有点太多扩展，但是当我组合东西时它有更糟的错误。我的代码是低于我所需要的是最后一个酒吧适合像另一个。我试图改变该行的填充和边距，以及完全重做我的网格。 #grid { margin: auto; display: grid; grid-template-rows: auto; width: 100%; }