标签: css-grid
将自动扩展“concertina”CSS 网格行行为复制为列
Michelle Barker 写了 \xe2\x80\x9cSolving a Tricky Layout Problem with CSS Grid\xe2\x80\x9d。她的代码在垂直方向上工作得很好，但我\xe2\x80\x99m很难在水平方向上适应它。
\n随着视口变窄（或者当您添加更多文本或增加等），顶部/底部版本成功地缩放其文本\xe2\x80\x99s 网格行font-size。但是当调整视口、文本或font-size左/右版本\xe2\x80\xa6时，我\xe2\x80\x99m不知道如何描述发生的情况：
| 视口 | 顶部对齐 | 底部对齐 | 右对齐尝试 | 左对齐尝试 |
|---|---|---|---|---|
| 宽的 |  |  |  |  |
| 狭窄的 |  |  |  |  |
* {\n box-sizing: border-box;\n}\n\n.grid {\n border: 2px dashed;\n margin: 40px 0;\n}\n\n.grid__media {\n background: darkgray;\n font: 2em monospace;\n alignment-baseline: middle;\n text-anchor: middle;\n}\n\n.grid__text {\n background: rgba(95, 158, 160, 0.7);\n}\n\n:root {\n --static-areas: repeat(8, minmax(0, 1fr));\n --autoexpanding-areas: [text-start] 1fr [media-start] auto [text-end] 40px [heading-start] auto [heading-end] 40px auto …推荐指数
解决办法
查看次数
flex-wrap 导致儿童身高增加一倍
正如标题所示，当在父 div 上启用 flex-wrap:wrap 时，子网格容器的高度会加倍。我希望它不要这样做，但更重要的是，为什么会发生这种情况？
我假设如果/当添加更多网格项以使其包裹时，网格的高度将简单地调整......但我显然错过了一些东西。
我希望它看起来像flex-wrap:nowrap启用时一样，但我也希望它能够换行......
.container {
width: 88%;
margin: 2rem auto;
max-width: 1400px;
}
.cno-event-search-filters__container {
display: flex;
flex-direction: column;
align-items: stretch;
}
.cno-event-search-filters__filter-container {
border: 2px solid black;
display: grid;
grid-template-columns: repeat(auto-fit, max(240px));
gap: 1rem;
}<div class="container">
<div class="cno-event-search-filters">
<div class="cno-event-search-filters__container">
<h4 class="cno-event-search-filters__title">Event Types</h4>
<div class="cno-event-search-filters__filter-container">
<div class="cno-event-search-filters__filter">
<input type="checkbox" id="Culture">
<label for="Culture">Culture</label>
</div>
<div class="cno-event-search-filters__filter">
<input type="checkbox" id="Entertainment">
<label for="Entertainment">Entertainment</label>
</div>
<div class="cno-event-search-filters__filter">
<input type="checkbox" id="Sports">
<label for="Sports">Sports</label>
</div> …推荐指数
解决办法
查看次数
CSS 网格模板区域无法与 Flex 子项正常工作
display:flex我在其中一个元素内部使用时遇到问题grid-template-area。grid-template-columns特别是，我很难理解为什么我在使用vs时看到的行为不同grid-template-area。
这是我的示例，第一个框是使用创建的grid-template-columns，第二个框是使用grid-template-area. 蓝色部分是一个flex元素：
1号用途：
grid-template-columns: 2fr 5fr;
2号用途：
grid-template-areas:
"stage-left2 stage-left2 stage-right2 stage-right2 stage-right2 stage-right2 stage-right2";
既然它们都是 2:5 的比例，那么它们不应该相等吗？
还有一个问题，为什么在第二个示例中黄色区域缩小而不是像第一个示例中那样保持大小等于 2/7？这似乎与蓝色区域是弹性元素有关。当从那里删除 flex 属性时，黄色区域将恢复到正确的大小。
grid-template-areas:
"stage-left2 stage-left2 stage-right2 stage-right2 stage-right2 stage-right2 stage-right2";
#plan-container{
max-width: 500px;
}
.stage {
display: grid;
grid-template-columns: 2fr 5fr;
border-bottom: 3px solid grey;
padding-bottom: 10px;
margin-bottom: 10px;
}
.stage-left {
background-color: yellow;
display: grid;
grid-template-rows: 4fr 2fr;
text-align: center;
}
.stage-right {
background-color: aqua;
display: flex; …推荐指数
解决办法
查看次数
CSS网格和Sass
CSS工作组成员Rachel Andrews在会议视频中提到Sass与新的CSS网格规范兼容。这样，是否有人知道在Sass的网格模板区域上分隔“ ASCII艺术”的语法？从那以后，我检查了Sass文档，但找不到任何东西。我得到的错误涉及间距。赞赏社区中的任何指针。如果没有，请返回.css直到（（：谢谢...
.wrapper
grid-template-areas: header
nav
image
lead
cta //errors occur here with ASCII art grid areas for CSS grid
.header-area
grid-area: header
.nav-area
grid-area: nav
.image
grid-area: image
.lead
grid-area: lead
.cta
grid-area: cta推荐指数
解决办法
查看次数
css grid-template-areas属性未对齐网格项
我是css网格的新手,我正在尝试使用这种布局构建一个页面:
我遇到的问题是.main容器网格中的类和网格.
我想我的网格设置错误了.main.
对于上层容器.container,我可以看到三列布局正在工作.
在第一行,我希望div图像div跨越三列中的两列,而blogart div则占据一列.
第二行应该有三个blogart div,每个divs一个列.
但是在内部网格中.main,所有标记都在第四列中.
我已经设置了一个codepen非常适合任何建议.
这是我的标记,css在codepen中:
body {
padding-top: 20px;
background: #f5f7f8;
}
.container{
display: grid;
width: 100%;
max-width: 750px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px 180px 80px;
grid-gap: 20px;
grid-template-areas: "header header header"
"main main main"
"footer footer footer";
}
.container div{
color: white;
font-size: 20px;
padding: 20px;
}
.header {
background: #b03532;
grid-area: header;
}
.main {
background: #33a8a5;
grid-area: main; …推荐指数
解决办法
查看次数
使用网格模板区域/命名区域重叠网格项目
我正在尝试使用CSS网格,这就是我正在构建的布局:
.grid {
display: grid;
align-items: center;
grid-template-columns: 1fr 4rem 1fr;
grid-template-rows: 1rem 1fr 1rem;
max-width: 900px;
margin: 0 auto;
}
.text {
/*
// Ideally, this should be
grid-area: text
*/
grid-column: 1 / 3;
grid-row: 2 / 3;
/* Fix z-index */
position: relative;
padding: 4rem;
background-color: #fff;
}
.image {
/*
// Ideally, this should be
grid-area: image;
*/
grid-column: 2 / 4;
grid-row: 1 / -1;
background-color: lightgray;
padding: 1rem;
/* Center das image */
display: …推荐指数
解决办法
查看次数
将网格项跨越到CSS Grid的整个宽度
我如何使用display:grid它只是目标.entry或.post元素,并排除档案标题和分页？
(archive-description并且pagination跨越内容div的整个宽度)
.content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}<main class="content">
<div class="archive-description">Archive Title</div>
<article class="post entry">This is a post</article>
<article class="post entry">This is a post</article>
<article class="post entry">This is a post</article>
<li class="pagination">Previous & Next Entry</li>
</main>推荐指数
解决办法
查看次数
在CSS网格内垂直对齐
我想要一个巨大的进度栏，该进度栏在CSS网格内垂直对齐。
问题是CSS网格内的垂直对齐对我不起作用。我在Firefox和Chrome上都尝试过。
我试过了vertical-align: middle，但是没有用。我已经在网格项目中放置了一个Flexbox，但是仍然无法正常工作。
这是我的最小示例：
.wrapper {
display: grid;
border-style: solid;
border-color: red;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 10px;
width: 100vw;
height: 100vh;
}
.one {
border-style: solid;
border-color: blue;
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.two {
border-style: solid;
border-color: yellow;
grid-column: 1 / 3;
grid-row: 2 / 4;
}
.three {
border-style: solid;
border-color: violet;
grid-column: 1;
grid-row: 4 / 5;
}
.four {
border-style: solid;
border-color: aqua;
grid-column: 2;
grid-row: …推荐指数
解决办法
查看次数
CSS网格空单元格布局问题
我正在尝试使用CSS网格制作元素周期表。为此，我需要在多行中使用空单元格-我正在尝试通过此处显示的文档来实现这一点：https : //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
的HTML
<div class="wrapper">
<div class="element">El</div>
//repeated 90 times
</div>
的CSS
.element {
grid-area: el;
}
.wrapper {
display: grid;
grid-template-columns: repeat(18, 1fr);
grid-template-areas:
'el . . . . . . . . . . . . . . . . el'
'el el . . . . . . . . . . el el el el el el'
'el el . . . . . . . . . . el el el el el …推荐指数
解决办法
查看次数
使用Grid很难或不可能实现Flexbox涵盖的哪些领域？
突出强调了Flexbox用于1-D，而Grid用于2-D，但是我还没有找到清楚的解释，为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是
但是您也可能会争辩说，像这样的纯一维布局在Flexbox中更强大，因为Flexbox允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧，更改其顺序，将它们均匀地隔开等）。
我将Grid和Flexbox用于基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，...）通过框架进行管理。我还没有发现Grid无法立即替换Flexbox的情况（即没有高级CSS 技巧或很多代码）。
以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。
Flexbox涵盖哪些难以或无法通过Grid管理的基本领域？
编辑：浏览器支持并不重要（我只使用常绿的浏览器，如果需要可以切换）
推荐指数
解决办法
查看次数
标签 统计
css ×10
css-grid ×10
css3 ×3
flexbox ×3
html ×3
grid-layout ×1
html5 ×1
sass ×1
translation ×1