标签: css-grid
当网格项跨越多列时进入一列布局
使用时：
grid-template-columns: repeat(auto-fit, minmax(*size*, 1fr));
在网格内部，一切似乎都完美无缺。它可以创建尽可能多的瓷砖以适应空间。
当我将 a 添加grid-column: span 2到网格项目时，一切正常，直到只有一个项目的足够空间。
由于span 2网格永远不会分解为一列，并且会创建一个非常小的列，其中包含以下项目并且永远不会换行。
如果我取出span 2，它会完美地包裹起来。
如果可能的话，我宁愿不使用媒体查询来解决这种行为。
有没有人知道为什么会发生这种情况？
这是行为的 Codepen：https ://codepen.io/anoblet/pen/BYOeQM
grid-template-columns: repeat(auto-fit, minmax(*size*, 1fr));
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}
.span-2 {
grid-column: span 2;
}
.grid-auto {
background: red;
}
.grid-900 {
max-width: 850px;
background: blue;
}如果您调整窗口大小，两个网格都会显示该行为，但第二个网格会立即显示它。
谢谢您的帮助 ：）
推荐指数
解决办法
查看次数
CSS Grid：不完整行的边框
有没有办法让 CSS 网格 ( display: grid) 在所有项目周围都有 1px 的边框并填充不完整的行？设置 的方法background-color似乎不是一个可行的解决方案。
我的目标是在代码片段中创建一个没有灰色区域的网格，其中项目丢失，并且网格线始终贯穿整个表格。这应该适用于每行项目的响应组合。
似乎需要特殊的伪类，因为下面没有项目并且没有右侧的项目来使这项工作在响应式布局中工作，因为 last-of-type 关于网格的信息太少而无法使用它造型。
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
background-color: #d4d4d4;
grid-gap: 1px;
border: 1px solid #d4d4d4;
}
.grid > div {
padding: 15px;
text-align: center;
background-color: white;
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>推荐指数
解决办法
查看次数
添加内容时防止网格项扩展
我正在尝试创建一个布局，其中屏幕被分成一些大小相同的单元格。当我用内容填充其中一个单元格时，它会拉伸得比其他单元格大，即使内容比单元格本身小得多。
尽管单元格足够大以容纳其内容，但为什么单元格会拉伸？我怎样才能防止它调整大小？
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #880022;
}
#content {
display: grid;
width: 100%;
height: 100%;
grid-template-rows: 20px auto 20px;
grid-template-columns: 20px auto 20px;
}
#content2 {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
height: 100%;
background-color: #ff00ff;
}
#grid {
grid-row-start: 2;
grid-column-start: 2;
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
grid-gap: 2px 2px;
}
.tile {
background-color: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.tile span …推荐指数
解决办法
查看次数
使用 CSS Grid，如何在同一列上有多个元素，跨越多行？
我下面的 HTML 和 CSS（.type-a部分），它使用的是 CSS Grid。
我需要的是使所有具有.col1类的元素在第一列上正确对齐 - 同时.col2跨越整行。
更改 HTML 不是一个选项（我知道通过更改 HTML 很容易解决这个问题）。
我们永远不会确切知道.col1将有多少行，我确实希望避免创建 1000 行以使其工作（就像您在 上看到的那样.type-b）。
.container {
display: grid;
grid-auto-columns: 50%;
grid-auto-flow: dense;
/* Decorative */
color: #ffffff;
text-align: center;
}
.col1 {
grid-column: 1;
}
.col2 {
grid-column: 2;
}
// Type B
.type-b>.col2 {
grid-row: 1 / 100;
}
// Decorative Styles
.divider {
height: 1px;
background: #B0BEC5;
margin: 30px;
} …推荐指数
解决办法
查看次数
具有不同高度的 CSS Flexbox 2 列
我有以下代码：
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.a {
background-color: red;
width: 65%;
}
.b {
background-color: green;
width: 35%;
}
.c {
background-color: blue;
width: 65%;
height: 100px;
}
.d {
background-color: orange;
width: 35%;
}
.e {
background-color: teal;
width: 65%;
}
.f {
background-color: purple;
width: 35%;
}<div class="wrapper container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>
我试图让 F 正好在 D 之下，就像这样：
我这样做而不是 2 个单独的列的主要原因是因为我希望以后能够使用order. …
推荐指数
解决办法
查看次数
共享同一行和列时将网格项设置为不重叠
现在，当两个网格项共享相同的行和列时，它们会相互重叠。
<div class="some-grid-container">
<div style="grid-row: 1; grid-column: 1">Item 1</div>
<div style="grid-row: 1; grid-column: 1">Item 2</div>
</div>
我如何使它们不重叠？当共享相同的行和列时，可能表现得像弹性项目。（不制作外容器）。
推荐指数
解决办法
查看次数
跨 2 列和 2 行的 Flexbox 单元格
我想知道这是否可以仅使用 flexbox 来完成，或者我是否还需要合并网格功能。我试图让特定的单元格跨越多行和多列。我是我的独特案例，它只是第一个框需要与它下方的 2 个框具有相同的宽度，并且与它右侧的两个框具有相同的高度。
这是我最初尝试的代码笔，我明白为什么它不起作用。只是想知道是否有办法得到这个：
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 31.58585%;
background-color: #f1f1f1;
border: 1px solid #aaa;
margin-bottom: 10px;
margin-top: 10px;
text-align: center;
}
.highlight {
flex-basis: 65.9%;
}<div id="container">
<div class="box highlight">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>进入这个：
推荐指数
解决办法
查看次数
尝试将文本添加到 CSS 网格
我正在尝试以简历样式创建网格模板。
基本上，我有一个包含 2 列 1 fr 和 3fr 的网格。
1fr 具有该部分的标题，而 3fr 具有所有内容。在 3fr 部分中，我正在添加工作经验，并将其布局以便有 2 列具有 display: flex 属性
每个都在一个带有 div 的部分中。
现在，当我添加第一个工作时看起来不错，但随后我添加了第二个工作，并将其分层在第一个工作之上，依此类推。我希望他们在该部分中基本上处于各自的行中。
我如何才能使它们不会相互堆叠，而是整齐地一个接一个地放置？
我需要在该网格行内制作另一个网格吗？
任何帮助都会很棒，请在下面查看我的 Codepen（这只是一个片段，请参阅下面的完整 codepen）
.container {
display: grid;
max-width: 82em;
max-height: auto;
margin: auto;
grid-template-areas: "head head"
"nav nav"
"about about-info"
"work work-info"
"education education-info"
"skills skills-info"
"footer footer";
grid-template-rows: 300px 50px 12.50em 31em 500px 500px 50px;
grid-template-columns: 1fr 3fr;
grid-gap: .075em;
background-color: white;
}
.work-info {
border: 1px solid black;
grid-area: work-info;
display: …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
像 css 中的弹性项目一样收缩网格项目
是否可以像 css 中的弹性项目一样缩小网格项目？
网格项目
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.child {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: 5px;
border: 3px solid #a07;
}<div class="container">
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
<div class="child">
text
</div>
</div>弹性项目
.container {
display: flex;
margin-left: -10px;
flex-flow: row wrap;
}
.child {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: …推荐指数
解决办法
查看次数