标签: css-grid
如何在 CSS 网格中实现滚动？
我有一个嵌入在 css-grid 中的组件。
在 stack blitz 中，我有一个 3 行的外部网格。其中一行具有最小宽度。如果视口小于最小宽度，如何让它水平滚动？
在中间行中，我有一个组件，它本身使用 2 列网格。列中的 div 有一个最小高度。
我正在寻找的是，如果视口的大小使整个内部组件（红色框）不可见，则红色框是可滚动的。
这是一个堆栈闪电战：
https://stackblitz.com/edit/angular-q4geyk
这是另一个例子：
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.content {
display: grid;
grid-template-rows: 2em 1fr 1px;
grid-gap: 0.5rem;
height: 20em;
}
.my-panel {
border: 1 green solid;
background-color: red;
padding: 0.25rem;
}
.my-component {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5rem;
padding: 0.25rem;
height: 100%;
}
header {
border: green solid 1px;
padding: 4px;
}
main {
border: …推荐指数
解决办法
查看次数
CSS网格:内容使用可用空间,但滚动时更大
我第一次使用CSS网格布局,他们很棒.但是现在,我无法控制我的一个网格单元.
我想要的是拥有一个占用现有可用空间的元素,而不是更多,当内容变得太大时滚动.我的理解是,1fr在计算其他所有内容之后,网格大小会占用可用空间的均匀数量.我尝试了各种尺寸,minmax(auto, 1fr)但无济于事 - 1fr似乎扩展到适合我不想要的内容.设置最大尺寸大小100px也不好,因为我希望大小由网格中的其他元素决定.
这是一个例子:
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 1fr;
}
.container>div {
border: 1px solid blue;
border-radius: 5px;
}
.left {
grid-column: 1;
grid-row: 1/4;
}
.header {
grid-column: 2;
grid-row: 1;
}
.problem-child {
grid-column: 2;
grid-row: 2;
overflow-y: scroll;
}
.footer {
grid-column: 2;
grid-row: 3;
}<div class="container">
<div class="left">left<br>I don't want this one to scroll<br>this should<br>determine<br>the height …推荐指数
解决办法
查看次数
控制CSS网格布局中图像的大小
我有一个CSS网格布局,有一堆区域和一个照片容器.
我不知道如何:
控制照片的大小,使其包含在网格区域内
保持照片的宽度为100%(因此等于其容器)并缩放容器的高度以适合照片.基本上,当窗口变小时,照片的宽度变小,高度也变小 - 拉动标签,相册和旋转元素.
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 40vh 30vh 30vh;
grid-gap: 10px;
grid-template-areas:
"info photo photo photo photo"
"comment photo photo photo photo"
"comment tag tag album rotate"
}
.photo {
grid-area: photo;
background: yellow;
}
.photo>img {
object-fit: cover;
width: 100%
}
.info {
grid-area: info;
background: pink;
}
.tag {
grid-area: tag;
background: teal;
}
.comment {
grid-area: comment;
background: green;
}
.album {
grid-area: album;
background: red;
}
.rotate { …推荐指数
解决办法
查看次数
为什么minmax(0,1fr)适用于长元素而1fr不适用？
所以我有这个网格:
+---------+------------------------------+---------+
| <div> | <p> - 1000 characters long | <div> |
+---------+------------------------------+---------+
里面p有超长的字符串,没有空格.divs是具有固定尺寸的占位符.这产生了以上:
display: grid;
grid-auto-flow: column;
grid-template-columns: auto minmax(0, 1fr) auto;
但minmax(0, 1fr)改为1fr给出这个:
+---------+----------------------------------------+
| <div> | <p> - 1000 characters long | <div> |
+---------+----------------------------------------+
它从其父级溢出并超出屏幕大小.为什么它不像minmax？
推荐指数
解决办法
查看次数
如何使用CSS网格布局在CSS中创建固定列？
我创建了一个带有#containerdiv 的简单站点,它是两个div的父级:#left并且#right,通过使用Grid Layout:
有没有办法让左栏固定？我希望左侧文本保持其位置,并且正确的文本可以像现在一样滚动.添加position: fixed以#left打破布局.
我知道这个问题已经解决了,但我很欣赏一种方法,使它适用于网格布局.
谢谢.
body {
margin: 0 0 0 0;
}
#container {
display: grid;
grid-template-columns: 50% 50%;
}
.section {
padding: 5% 5% 5% 5%;
}
#left {
background-color: aquamarine;
}
#right {
background-color: beige;
}<div id="container">
<div id="left" class="section">
<p>This should not scroll</p>
</div>
<div id="right" class="section">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec …推荐指数
解决办法
查看次数
如何使CSS Grid项占用剩余空间？
我有一个使用CSS Grid布局构建的卡.左侧可能有图像,右上角可能有文本,右侧底部可能有按钮或链接.
在下面的代码中,如何让绿色区域占用尽可能多的空间,同时使蓝色区域占用尽可能小的空间？
绿色应该尽可能地将蓝色区域向下推.
https://jsfiddle.net/9nxpvs5m/
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"one two"
"one three"
}
.one {
background: red;
grid-area: one;
padding: 50px 0;
}
.two {
background: green;
grid-area: two;
}
.three {
background: blue;
grid-area: three;
}<div class="grid">
<div class="one">
One
</div>
<div class="two">
Two
</div>
<div class="three">
Three
</div>
</div>推荐指数
解决办法
查看次数
如何将CSS Grid中最后一行的元素居中？
我正在使用CSS网格来布局这样的项目......
#container {
display: grid;
grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.item {
background: teal;
color: white;
padding: 20px;
margin: 10px;
}<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>如何让最后一行居中而不是左对齐？我不能保证项目的数量,所以想要使布局看起来适合任意数量的项目.
这是我应该使用flexbox吗？或者CSS网格是否合适？
推荐指数
解决办法
查看次数
Chrome开发者工具中是否有CSS Grid突出显示？
在Firefox的开发人员工具中,可以看到CSS网格,还可以看到它未被选中的时间.
是否可以在Chrome的开发者工具中显示CSS网格,同时未选择网格？
推荐指数
解决办法
查看次数
作为flexbox子代的CSS网格表现不尽如人意
我经常使用CSS创建一个响应式3列网格display: grid.我在网格中的HTML标记有3个div项目,因此网格创建3列
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
当您调整窗口大小时,它会按预期折叠为1列:
https://codepen.io/smlombardi/pen/oqMjrd?editors=1100
.hero-modules {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.hero-modules .hero-item {
border: 1px solid #000;
text-align: center;
}
.hero-modules .hero-item h3 {
font-size: 22px;
text-align: center;
}<div class="hero-modules">
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
</div>
<div>
<a class="hero-read-more">Read more</a>
</div>
</div>
<div class="hero-item">
<div>
<h3>Title of Item</h3>
<p>Lorem …推荐指数
解决办法
查看次数
对于单个排水沟,是否可以覆盖网格行间隙/夹持柱间隙？
有没有办法将单个grid-row-gap特定大小设置为与网格的其余部分不同？
使用案例:网格的顶行与第二行的间距应小于网格的其余部分,因为它充当标题.
推荐指数
解决办法
查看次数