我在一个长度为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网格的所有指南似乎都暗示了一种结构,其中位于网格中的元素是网格本身的子元素.
<div class="wrapper">
<div>A</div>
<div>B</div>
</div>
凡.wrapper具有display: grid和网格属性的定义.
如果我想在网格本身上放置一个网格的"孙子"元素(而不是依赖于它的父级？),这是否有意义？
<div class="wrapper">
<div>A</div>
<div>
<div>B</div>
<div>C</div>
</div>
</div>
在这里,我希望能够将A,B和C各自放在他们自己的网格行上; 这甚至有意义吗？
我尝试构建一个 CSS 网格，其中一些条目嵌套在 div 结构中：
像这样它的工作原理：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-template-rows: 1;
}
.cent {
grid-column: 2;
grid-row: 1;
}
.left {
grid-column: 1;
grid-row: 1;
}
.right {
grid-column: 3;
grid-row: 1;
}<div class="wrapper">
<div class="cent">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>但是如果我开始嵌套我的结构，我将无法访问我想要的列：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-template-rows: 1;
}
.cent {
grid-column: 2;
grid-row: 1;
}
.left {
grid-column: 1;
grid-row: 1;
}
.right {
grid-column: 3;
grid-row: …