标签: css-grid
CSS网格布局 - 如何使用javascript计算鼠标所在的网格单元格？
"css网格布局"= https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
有没有人知道一种javascript方法来计算鼠标当前所在的列/行？
我猜这样的东西是获得鼠标所在单元格的开始,但是这只适用于相同大小的网格.
MouseGridColumn = round(mouseX / ( gridContainerWidth / gridTotalColumnsNumber ) )
MouseGridRow = round(mouseY / ( gridContainerHeight / gridTotalRowsNumber ) )
有没有办法用不相等的细胞做到这一点？
更新1 - 添加codepen
这是一个codepen,显示3个不同的百分比列宽(grid-template-columns: 25% 50% 25%;),2行,一个没有元素的网格单元格和一个跨越多行的元素:http://codepen.io/anon/pen/NbeOXp
更新2 - 尝试计算鼠标所在的网格单元格.
在这里,我为网格中的每个单元格添加了隐藏元素,以检测鼠标所在的单元格.但是它只返回它所在的当前元素的"auto".它还非常笨重,不得不向网格添加额外的隐藏元素IMO .
http://codepen.io/anon/pen/gLZBZw提示:使用鼠标悬停在网格上.
推荐指数
解决办法
查看次数
使div在网格中跨越两行
我有一个装满了块的页面display: inline-block.我想做四到两倍大,所以我用float: left或者right把其他块放在一边.
我的问题是,如果我有一个五行元素,我怎么能在它的中间放一个更大的元素？(float自然而然地放在一边).
这是一个示例代码段:
#wrapper{
width: 516px;
}
.block{
display: inline-block;
width: 90px;
height: 50px;
margin: 5px;
background-color: red;
}
.bigger{
height: 110px;
}<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
</div>以下是我希望从上面的代码段中获得的内容 
推荐指数
解决办法
查看次数
如何在CSS网格布局中将文本溢出设置为省略号？
我有一个像header下面那样的网格布局.div中有一个宽度为的文本1fr.我希望div中的文本在太长时间内被截断.添加text-overflow为ellpsis无效.知道怎么做吗？
它必须是网格,我无法改变它.
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
display: flex;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
}
content {
flex: 1;
background-color: red;
}
header {
background-color: limegreen;
display: grid;
grid-template-columns: 0fr 1fr 0fr;
}
header div {
border: 1px solid orange;
}
.long {
text-overflow: ellipsis;
}<div class="container">
<header>
<div>Left</div>
<div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do …推荐指数
解决办法
查看次数
CSS Grid Row Height Safari Bug
我已经制作了一个1fr 1fr 1fr行的网格模板.在中间行,有一个内嵌图像列表.
在Chrome和Firefox中,图像尊重网格行的高度并正确适应.但是,在Safari 10.1.2和Safari TP 31中,似乎存在溢出行的图像组合而未适当缩放图像宽度.
也许我做错了什么？或者这是一个Safari bug？如果是这样,有解决方法吗？
Safari 10.1
Safari TP
Chrome 60
#grid {
height: 100vh;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
#thumbnailContainer {
position: inherit;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
img {
display: inline;
height: 100%;
width: auto;
}
header,
footer {
background-color: dodgerblue;
}<div id="grid">
<header>Header</header>
<div id="thumbnailContainer">
<img src="https://c2.staticflickr.com/8/7591/16903911106_b7ced9d758.jpg">
<img src="https://c1.staticflickr.com/9/8740/16927517701_810fcb2a7c.jpg">
<img src="https://c2.staticflickr.com/8/7637/16902583636_15138a68f0.jpg">
<img src="https://c2.staticflickr.com/8/7614/16927530091_6755845b13.jpg">
<img src="https://c1.staticflickr.com/9/8700/16741099010_d0ecd9df1f.jpg">
<img src="https://c1.staticflickr.com/9/8745/16927567841_74fd20d01d.jpg">
</div>
<footer>Footer</footer>
</div>推荐指数
解决办法
查看次数
CSS网格布局:支持IE11的网格区域
有人告诉我如何让这个例子在ie11中运行？我检查了文档和-ms-前缀没有帮助
#page {
display: -ms-grid;
display: grid;
width: 100%;
height: 250px;
grid-template-areas: "head head" "nav main" "nav foot";
-ms-grid-rows: 50px 1fr 30px;
grid-template-rows: 50px 1fr 30px;
-ms-grid-columns: 150px 1fr;
grid-template-columns: 150px 1fr;
}
#page > header {
grid-area: head;
background-color: #8ca0ff;
}
#page > nav {
grid-area: nav;
background-color: #ffa08c;
}
#page > main {
grid-area: main;
background-color: #ffff64;
}
#page > footer {
grid-area: foot;
background-color: #8cffa0;
}
推荐指数
解决办法
查看次数
指定哪些单元格扩展单元格区域以及哪些单元格不在CSS网格中的内容
我希望网格中有一个单元格,其中包含不重要的信息,这些信息不会使任何其他单元格扩展到超出绝对要求的范围.它的高度不应超过其他细胞的高度,其宽度应为空的未占用区域.
让我们说每个项目我有一个缩略图,一个标题(单个不可绕行的行),信息(零行或多行),描述(可能很长,只有在空白时显示).
我想出了这个:
.list {
display: flex;
flex-wrap: wrap;
font: 12px/14px Verdana;
}
.item {
display: grid;
grid-template-areas:
"thumb thumb thumb thumb"
"sl title desc sr "
"sl info desc sr ";
grid-template-columns:
auto auto 1fr auto;
grid-template-rows:
auto auto 1fr;
min-width: calc(var(--min-item-size) + 4px);
max-width: calc(var(--max-item-size) + 4px);
border: dotted 2px darkblue;
margin: 4px 2px auto 2px;
}
.item > * {
min-width: 0;
min-height: 0;
border: dotted 1px dodgerblue;
margin: 1px;
}
.thumb {
grid-area: thumb;
margin: auto; …推荐指数
解决办法
查看次数
使用网格CSS的3列网格(从上到下)
好的,这就是情况,假设我有一个包含未知数量项目的列表,它可能是10或100,我希望将它们排列在3列中从上到下而不是从左到右.
现在我可以实现这一点columns: 3;,column-gap: 10px;而且一切都很好.
我的问题是,如何在display: grid;不知道项目数量的情况下实现相同的结果？
我知道如果您有固定数量的项目,您可以通过CSS Grid实现此目的,但是可以使用动态项吗？当然不使用JS.
ul {
list-style: none;
columns: 3;
column-gap: 10px;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
</ul>推荐指数
解决办法
查看次数
CSS网格自动适应最大内容
我有4列.第1列和第4列的实际内容为150px,第2列为250px,第3列为370px.我希望在浏览器宽度更改时包装列.当我减小浏览器的宽度时,我希望每个列在包装之前缩小到它们的最小宽度.所以我想第4列会在宽度低于150px之后落到下一行,宽度为100%.
这就是我认为应该做的诀窍:
repeat(auto-fit, minmax(max-content, 1fr))
有没有办法实现这一点,而不通过固定宽度'max-content'？
这是我使用媒体查询和硬宽度的解决方案
https://jsfiddle.net/9hjb5qv8/
这是我在上面的小提琴中使用的html/css:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
grid-gap: 8px;
}
@media (max-width: 799px) {
.container {
grid-template-columns: minmax(max-content, 1fr);
}
}
@media (min-width: 800px) {
.container .p2,
.container .p3 {
grid-column: auto / span 2;
}
}
.container > div {
background-color: gray;
text-align: center;
}<div class="container">
<div class="p1">
<img src="https://via.placeholder.com/150x150">
</div>
<div class="p2">
<img src="https://via.placeholder.com/250x150">
</div>
<div class="p3">
<img src="https://via.placeholder.com/370x150">
</div>
<div class="p4">
<img src="https://via.placeholder.com/150x150">
</div>
</div>推荐指数
解决办法
查看次数
网格::右对齐网格项目
通过使用右侧按钮的网格定位。有人能指出我正确的方向吗？
.container {
width: 500px;
border: 1px solid red;
}
.grid {
display: grid;
grid-gap: 5px;
grid-auto-flow: column;
width: 100px;
}<div class="container">
<div class="grid">
<button>test 1</button>
<button>test 2</button>
</div>
</div>在上面的场景中，如何将两个按钮移动到父div的末尾？
推荐指数
解决办法
查看次数
在css网格中实现flexbox行反转
在掌握了 Flexbox 之后，我开始学习 CSS 网格。
这是我之前构建的一个简单的弹性盒网格：
.container {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
.flex {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 24px;
flex: 1;
}
.flex:nth-child(even) {
flex-flow: row-reverse wrap;
text-align: left;
}
img {
height: auto;
max-width: 100%;
}<div class="container">
<div class="flex">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
</div>
</div><!-- .flex -->
<div class="flex">
<div class="col">
<h2>I'm A Title</h2>
<p>Here's some copy.</p>
</div>
<div class="col"> …推荐指数
解决办法
查看次数