Questions tagged «css-grid»

我正在尝试使用CSS Grid创建一个简单的页面。 我无法做的是将HTML文本集中到相应的网格单元格。 我尝试将内容放置在和选择器div内部和外部的单独s中，left_bg并right_bg使用某些CSS属性无效。 我该怎么做呢？ html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid; background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; } .right_bg { display: subgrid; background-color: #ecf0f1; grid-column: …

179 html  css  centering  css-grid 

TL; DR：table-layout: fixed CSS网格有什么类似的东西吗？ 我试图用几个月的大4x3网格创建年视图日历，而白天则嵌套7x6网格。 日历应填满页面，因此Year网格容器的宽度和高度分别为100％。 .year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); } 这是一个工作示例：https : //codepen.io/loilo/full/ryXLpO/ 为简单起见，该笔中的每个月都有31天，从星期一开始。 我还选择了一个可笑的小字体来演示该问题： 网格项（=日单元格）非常简洁，因为页面上有数百个。当日期数字标签过大（可以使用左上角的按钮随意使用笔中的字体大小）时，网格的大小就会增大，并超过页面的主体尺寸。 有什么办法可以防止这种行为？ 我最初宣布年份网格的宽度和高度为100％，所以这可能是起点，但是我找不到任何与网格相关的CSS属性都可以满足这一需求。 免责声明：我知道有很简单的方法可以设置日历的样式，而无需使用CSS网格布局。但是，这个问题更多地是关于该主题的常识而不是解决具体示例。

153 css  grid-layout  css-grid 

我需要实现相当合理的砌体布局。但是，由于多种原因，我不想使用JavaScript来实现它。 参数： 所有元素具有相同的宽度 元素具有服务器端无法计算的高度（图像加上各种文本） 如果必须，我可以使用固定数量的列 有一个简单的解决方案，可以在现代浏览器中运行，该column-count属性。 该解决方案的问题在于元素按列排序： 虽然我需要按行对元素进行排序，但至少要大致： 我尝试过的方法不起作用： 制作物品display: inline-block：浪费垂直空间。 制作物品float: left：大声笑，不。 现在，我可以更改服务器端渲染并重新排序项目，将项目数除以列数，但这很复杂，容易出错（基于浏览器决定如何将项目列表拆分为列），所以我想尽可能避免它。 是否有一些新的flexbox魔术使这成为可能？

134 html  css  flexbox  css-grid 

是否可以在不使用媒体查询的情况下进行CSS网格环绕？ 就我而言，我有不确定数量的项目要放置在网格中，并且希望该网格包装。使用Flexbox，我无法可靠地很好地分隔事物。我也想避免一堆媒体查询。 这是一些示例代码： .grid { display: grid; grid-gap: 10px; grid-auto-flow: column; grid-template-columns: 186px 186px 186px 186px; } .grid > * { background-color: green; height: 200px; } <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> 运行代码段隐藏结果展开摘要 这是一张GIF图片： 附带说明一下，如果有人能告诉我如何避免像我一样指定所有项目的宽度，grid-template-columns那将是很好的。我希望孩子们指定自己的宽度。

126 html  css  css-grid 

我认为使用Flexbox无法实现这一点，因为每一行只能是适合其元素的最小高度，但是可以使用更新的CSS Grid来实现吗？ 明确地说，我希望网格中所有行的所有元素的高度相等，而不仅仅是每行的高度都相等。基本上，最高的“单元格”应规定所有单元格的高度，而不仅仅是其行中的单元格。

98 css  flexbox  grid-layout  css-grid 

我正在尝试将<button>-tag的内部元素与flexbox的居中对齐justify-content: center。但是Safari不会将它们居中。我可以将相同的样式应用于任何其他标签，并且可以按预期工作（请参见<p>-tag）。仅按钮左对齐。 尝试使用Firefox或Chrome，您会发现其中的区别。 有什么我必须覆盖的用户代理样式？或对此问题有其他解决方案？ div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; } <div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> </div> 运行代码段隐藏结果展开摘要 和jsfiddle：http： //jsfiddle.net/z3sfwtn2/2/

91 html  css  safari  flexbox  css-grid 

如何为单个页面应用程序强制CSS网格容器占用设备屏幕的整个宽度和高度？修改后的示例来自Mozilla：Firefox文档 .wrapper { display: grid; border-style: solid; border-color: red; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 10px; } .one { border-style: solid; border-color: blue; grid-column: 1 / 3; grid-row: 1; } .two { border-style: solid; border-color: yellow; grid-column: 2 / 4; grid-row: 1 / 3; } .three { border-style: solid; …

71 html  css  css-grid