标签: css-grid
与css网格的砌体布局
我正在尝试使用css网格布局创建砌体布局.网格中的所有项目都具有可变高度.我不知道会有什么东西.所以我不能grid-row为每个项目定义.是否可以在列中的上一个结尾之后立即启动每个新项目？
代码我正在尝试:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 330px);
align-items: flex-start;
grid-column-gap: 10px;
grid-row-gap: 50px;
}
.item {
background: black;
border-radius: 5px;
}<div class="wrapper">
<div class="item" style="height:50px"></div>
<div class="item" style="height:100px"></div>
<div class="item" style="height:30px"></div>
<div class="item" style="height:90px"></div>
<div class="item" style="height:80px"></div>
<div class="item" style="height:50px"></div>
<div class="item" style="height:70px"></div>
<div class="item" style="height:40px"></div>
</div>推荐指数
解决办法
查看次数
CSS 网格。每个网格之间的间隙不同
我试图在每个网格元素之间应用不同的间隙，例如我们有以下代码。4 条网格线、3 个元素和每个网格框之间的 10 像素宽度。如何在每个网格框之间应用自定义宽度？例如 element1 和 element2 之间的 20px，然后 element2 和 element3 之间的 30px？
我可以用 css 网格来实现吗？
编辑：不使用填充。Edit2: 提供了 Pictre。
html, body {height: 100%; margin: 0; padding: 0;}
body {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-row: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
#element1 {
grid-column: 1/2;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element2 {
grid-column: 2/3;
grid-row: 1/2;
border: 1px solid #2e2e2e;
color: #000;
}
#element3 {
grid-column: 3/4;
grid-row: 1/2;
border: …推荐指数
解决办法
查看次数
CSS网格布局中网格项内元素的高度相等
我在一个长度为4+的div中有一系列文章,没有任何舍入行标记.我需要将它表示为每行3篇文章(列)的表,可能有display: grid.每篇文章都有一个标题,一个部分和一个页脚.
如何为每个标题实现相同的高度,每个部分的高度相等,以及与文章底部对齐的相等高度的页脚,在每行文章中？它甚至可能吗？我应该用display: table吗？
PS我需要动态地改变每行的文章数量,具体取决于屏幕宽度.感谢名单.
HTML:
body {
width: 100%;
max-width: 1024px;
margin: auto;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container article {
display: grid;
}
article header {
background-color: #eeeeee;
}
article section {
background-color: #cccccc;
}
article footer {
background-color: #dddddd;
}<div class="container">
<article>
<header>
<h2>Header</h2>
<h2>Header</h2>
</header>
<section>
<p>Content</p>
</section>
<footer>
<p>Footer</p>
</footer>
</article>
<article>
<header>
<h2>Header</h2>
</header>
<section>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</section>
<footer>
<p>Footer</p>
<p>Footer</p>
</footer> …推荐指数
解决办法
查看次数
文本未包装在CSS网格中
我一直在尝试使用CSS Grid,并坚持找到最有效的方法,让文本环绕一个<div>元素,该元素部分位于另外两个<div/>元素之上.基本上,就像在下面的图像中,我希望红色和蓝色div中的文本环绕黄色div,该黄色div部分位于其他两个元素的列和行中.显然,这是一个基于网格的布局,所以我对使用典型的浮点数做这件事并不感兴趣.如何使用CSS Grid实现此效果？
这是我的CSS和HTML:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
.red {
background-color: red;
grid-column: 1 / span 2;
grid-row: 1 / span 4;
}
.blue {
background-color: blue;
grid-column: 3 / span 2;
grid-row: 1 / span 4;
}
.yellow {
background-color: yellow;
grid-column: 2 / span 2;
grid-row: 2 / 4;
}<div class="grid">
<div class="red">According to the Oxford English Dictionary, hello is …推荐指数
解决办法
查看次数
Flexbox:flex-start,自启动和启动; 有什么不同？
我刚刚注意到align-self我之前从未见过的一些属性值.什么是start,end,self-start,和self-end和是什么,从他们之间的分歧flex-start和flex-end？
当我使用flexbox时,我经常指的是CSS-Tricks指南,但它没有提到这些值.我在MDN上阅读了align-self的文档,但是这些值的单行描述还不足以让我理解.
我以为我可以玩弄价值来解决它,但它们似乎都做同样的事情......
.container {
display: flex;
justify-content: center;
align-items: center;
background: papayawhip;
width: 400px;
height: 200px;
margin: 1rem auto;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
border-radius: 0.5em;
}
.block {
color: white;
font-size: 3em;
font-family: sans-serif;
padding: 0.5rem;
margin: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.block-1 {
background: red;
}
.block-2 {
background: orange; …推荐指数
解决办法
查看次数
css网格使用fr增长超过100%,但不是minmax
.small-container { width: 200px; }
.small-container > div { margin: 16px; }
.border { box-shadow: 0 0 2px 2px black; }
.break-long-text {
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.grid-fr {
display: grid;
grid-template-columns: 1fr;
}
.grid-minmax {
display: grid;
grid-template-columns: minmax(120px, 1fr);
}<div class="small-container">
<div class="grid-fr">
<div class="break-long-text border">
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
</div>
</div>
<div class="grid-minmax">
<div class="break-long-text border">
LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG
</div>
</div>
</div>两个网格完全相同,唯一的区别是grid-template-columns价值.但是,一个网格尊重其父(200px)的宽度,另一个网格忽略宽度.
grid:
grid-template-columns: 1fr;=>忽略父宽度并继续,直到内容被填充grid:
grid-template-columns: minmax(120px, 1fr);=>仅上升到parent-width(200px)然后变为必要的高度.但是,它仍然大于定义的min-width( …
推荐指数
解决办法
查看次数
有没有办法使用 javascript 检测元素所在的 CSS 网格列和行？
有没有办法在 JavaScript 中动态检测 CSS 网格中元素所在的网格列和行？
我有一个网格，我设置了三个断点，使其具有 4、3 或 2 列。
我想要做的是，如果用户单击某个单元格，则将单元格中的新元素立即动态覆盖到被单击的单元格的右侧，除非它位于最右侧的列中，在这种情况下，覆盖元素将进入左侧的单元格。
我知道我可以使用grid-column和grid-row来指定我想要放入新内容的单元格，但为了能够使用它，我需要知道被单击的单元格的列和行。
我怎样才能动态地确定这一点？
推荐指数
解决办法
查看次数
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网格自动适应最大内容
我有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>推荐指数
解决办法
查看次数
带有css网格的水平滚动
当我尝试在网格完成四列时进行水平滚动时遇到问题。看
#series {
display: grid;
grid-gap: 16px;
overflow-x: scroll;
padding: 16px;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: column;
}
使用这个我得到低于输出
但是，你知道，我想要像“四列”和一个滚动条一样查看更多。
有什么问题。
推荐指数
解决办法
查看次数