TL; DR:table-layout: fixed CSS网格有什么相似之处吗？
我尝试创建一个带有大型4x3网格的年视图日历,其中包含7x6网格.
日历应填充页面,因此年份网格容器的宽度和高度均为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 Grid Layout的情况下设置日历的样式.然而,这个问题更多的是关于该主题的一般知识而不是解决具体的例子.
使用repeat()和auto-fit/ auto-fill函数,当列或行具有已定义的长度模式时,很容易获取网格项.
在下面的示例中,所有列的最小宽度为100px,最大宽度为1fr.
#grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>但是当轨道没有长度模式(即长度随机变化)时,网格物品如何包裹？
在下面的示例中,第一列的宽度为60%.第二列是最小/最大250px/1fr.如何让第二列包装在较小的屏幕上？
#grid {
display: grid;
grid-template-columns: 60% minmax(250px, 1fr);
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}<div id="grid">
<div></div>
<div></div>
</div>我知道flexbox和媒体查询提供了解决方案,但我想知道Grid Layout是否可以做到这一点.我搜索了规格,但没有找到任何东西.也许我错过了这个部分.谢谢你的帮助.
我正在摆弄基于CSS网格的前端,并且在前端的不同部分需要一遍又一遍地执行以下行为:
因此,在我碰巧需要五行的情况下,这就是诀窍:
.myGridForFiveRows
{
display: grid;
grid-template-rows: auto auto auto auto 1fr;
}
但是,我真的很喜欢一个样式表,它可以为任何给定行数产生正确的行为.我想也许我可以用某种方式repeat()做到这一点？
https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
.myGrid
{
display: grid;
grid-template-rows: repeat(auto-fit, auto) 1fr;
}
我一直在玩弄的变种repeat(auto-fit, auto)和repeat(auto-fill, auto),不幸的是不合法的CSS,而repeat(4, auto)或repeat(auto-fill, 30px)有.
任何的想法？这不是我无法规避的事情,但恰好"显示n个正确大小的行,然后让最后一个元素占用所有剩余空间"基本上是我的规范中所有元素的默认行为...
我已经设置了一个包含两个项目的网格.此网格可以包含任意数量的项目,但对于此示例,这两个项目就足够了.
在该示例中,有两个灰色框对齐左侧.在宽屏幕(1000px以上)上使用检查器,我们可以发现填充剩余空间的第三个(或更多)"阴影"项目.
如何将网格框放在中心？就像"影子"项目不存在一样.
在.grid元素上我仍然想使用网格,因为我不需要编写自动媒体查询.在包装器上,任何事情都会发生.
此外,固定宽度不是一种选择.
.wrap {
display: flex;
flex-direction: column;
/*justify-content: center;
align-items: center;*/
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 1rem;
}
.item {
background: #eee;
}<div class="wrap">
<div class="grid">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
</div>
</div>我正在尝试使用网格布局制作日历。一周中的每一天都有标题。我的目标是将标题的高度（即：网格中的第一行）设置为30px，并让其余的行拆分剩余的可用空间。
我的日历CSS如下所示：
.calendar{
display:grid;
grid-template-columns:repeat(1,1fr);
grid-template-rows:30px repeat(auto-fill,1fr);
}
现在，我认为这完全可以实现我想要的功能，但是30px没有效果，并且每一行都是相等的高度。是否可以将静态值与混合repeat()？
我意识到我只能制作2个网格-一个用于标题，一个用于日间网格-但我很好奇是否有一种更清洁的方法。
演示在这里：https : //codepen.io/anon/pen/yGEaOm
.calendar{
display:grid;
grid-template-columns:repeat(1,1fr);
grid-template-rows:30px repeat(auto-fill,1fr);
}
.calendar {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 30px repeat(auto-fill, 1fr);
}
/** Appearance styles that don't affect the layout */
.calendar {
min-height: 200px;
}
.day {
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}我有一个CSS网格，当有很多项目时，它看起来很不错。但是，当有1个，2个或3个项目时，卡片会被拉伸。
我尝试将设置max-width为每张卡，但是列的宽度保持不变。有没有一种方法可以设置max-width每列？仅在3列以下时才需要使用它。（我对CSS网格很陌生）
.big-container {
padding: 0 10%;
}
.header {
width: 100%;
height: 50px;
background-color: blue;
}
.container {
border: 1px solid black;
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}
.box {
border: 1px solid black;
height: 30px;
background-color: yellow;
}<div class="big-container">
<div class="header"></div>
<p>Text</p>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>谢谢！