我无法正确放置元素:
1 - 标题“App name”、“Title 1”和“Title 2”(h1
标签)位于单元格下方而不是上方。
2- div
之间的垂直间距非常大
我尝试使用几个元素中的属性“玩”:
对齐元素
justify-item
self 对齐
self 证明
边距
填充
我的代码:
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "title1""title2""title3";
background-color: crimson;
grid-column-gap: 15px;
grid-row-gap: 15px;
}
.title1 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "title1-subtitle1 title1-subtitle2""title1-subtitle3 title1-subtitle4";
grid-area: title1;
background-color: yellow;
grid-column-gap: 15px;
grid-row-gap: 15px;
width: 95%;
align-items: center;
justify-items: center;
align-self: center;
justify-self: center;
margin: auto;
}
.title1>div {
background-color: orange;
}
.title1 div>h2,
p {
display: flex;
justify-content: center;
align-items: center;
}
.title1-subtitle1 {
grid-area: title1-subtitle1;
}
.title1-subtitle2 {
grid-area: title1-subtitle2;
}
.title1-subtitle3 {
grid-area: title1-subtitle3;
}
.title1-subtitle4 {
grid-area: title1-subtitle4;
}
.title2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "title2-subtitle1 title2-subtitle2";
grid-area: title2;
background-color: green;
grid-column-gap: 15px;
grid-row-gap: 15px;
width: 95%;
align-items: center;
justify-items: center;
align-self: center;
justify-self: center;
margin: auto;
}
.title2>div {
background-color: lightblue;
}
.title2 div>h2,
p {
display: flex;
justify-content: center;
align-items: center;
}
.title2-subtitle1 {
grid-area: title2-subtitle1;
}
.title2-subtitle2 {
grid-area: title2-subtitle2;
}
.title3 {
grid-area: title3;
background-color: violet;
grid-column-gap: 15px;
grid-row-gap: 15px;
width: 95%;
align-items: center;
justify-items: center;
align-self: center;
justify-self: center;
margin: auto;
}
.title3>h1,
p {
display: flex;
justify-content: center;
align-items: center;
}
<div class="grid-container">
<h1>App name</h1>
<div class="title1">
<h1>Title 1</h1>
<div class="title1-subtitle1">
<h2>Title 1 - Subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae?
</p>
</div>
<div class="title1-subtitle2">
<h2>Title 1 - Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae? Lorem ipsum, dolor
sit amet consectetur adipisicing elit. Eaque, odit aspernatur ea dolores dicta nisi, unde ut dolorem omnis iste blanditiis saepe, dolorum rerum quos consequuntur temporibus veritatis voluptatum accusantium? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quod qui, incidunt voluptas aperiam corrupti molestiae aut nostrum voluptatem ratione totam dicta, distinctio expedita quaerat magni repellendus aliquid, animi sapiente quo.
</p>
</div>
<div class="title1-subtitle3">
<h2>Title 1 - Subtitle 3</h2>
<p>Lorem
</p>
</div>
<div class="title1-subtitle4">
<h2>Title 1 - Subtitle 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae?
</p>
</div>
</div>
<div class="title2">
<h1>Title 2</h1>
<div class="title2-subtitle1">
<h2>Title 2 - Subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae?
</p>
</div>
<div class="title2-subtitle2">
<h2>Title 2 - Subtitle 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae?
</p>
</div>
</div>
<div class="title3">
<h1>Title 3</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. A velit in aperiam, expedita nesciunt nemo ea pariatur explicabo laudantium quasi commodi sed laboriosam obcaecati, libero nobis voluptas? Aliquam, possimus. Nemo.
</p>
</div>
</div>
这就是我想要的样子:
最佳答案
标题放置的主要问题是您没有为它们定义一个 grid-area
名称,然后将其列在 grid-template-areas
中。
在网格容器中,标题(h1
、h2
等)只是另一个网格项。
因为它被 grid-template-areas
忽略了,所以它被 grid auto-placement algorithm 处理了,最后渲染它。
关于html - 标题元素出现在内容下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57536566/