javascript - 网格布局的 CSS 调整大小问题
问题描述
我的页面上有一个网格,但它似乎没有按照我的要求做(像往常一样哈哈)。有两个主要问题我似乎无法解决。
数字 1:网格的右侧(最近的文章)似乎占用了太多空间。理想情况下,我希望网格居中,以便两半大小相等
数字 2:调整大小时,网格的左侧部分会被压缩,而右侧不会。如果可能的话,我希望左侧保持不变并压缩“最近的文章”列表的右侧
使用的代码在这里:
HTML:
<div class="homepage">
<div class="topics">
<div class="homepage-topics-title">
Explore some topics:
</div>
<div class="individual-topics">
<a href="/productivity" class="topic1">Productivity</a>
<a href="/orginisation" class="topic2">Orginisation</a>
<a href="/time-management" class="topic3">Time-Management</a>
</div>
</div>
<div class="recent">
<div class="homepage-recent-title">
Recent articles
</div>
<div class="hompage-recent-articles">
{{{body}}}
</div>
</div>
</div>
CSS:
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding: 6rem 0;
}
@media (max-width: 767px) {
.site-content {
padding: 3rem 0;
}
}
/* Homepage code */
.homepage{
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 3rem;
}
.homepage-recent-title{
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
padding-left: 3rem;
line-height: 1;
}
.homepage-topics-title{
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
margin-left: 3rem;
line-height: 1;
}
.individual-topics{
position: relative;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 5rem;
padding-right: 50%;
font-size: 1.6rem;
font-weight: 400;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 3;
}
解决方案
如果你调整你grid-template-columns
,我想你会得到你需要的。
/* Homepage code */
.homepage{
display: grid;
grid-template-columns: min-content 1fr;
margin-top: 3rem;
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding: 6rem 0;
}
@media (max-width: 767px) {
.site-content {
padding: 3rem 0;
}
}
/* Homepage code */
.homepage {
display: grid;
grid-template-columns: min-content 1fr;
margin-top: 3rem;
}
.homepage-recent-title {
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
padding-left: 3rem;
line-height: 1;
}
.homepage-topics-title {
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
margin-left: 3rem;
line-height: 1;
}
.individual-topics {
position: relative;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 5rem;
padding-right: 50%;
font-size: 1.6rem;
font-weight: 400;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 3;
}
<div class="homepage">
<div class="topics">
<div class="homepage-topics-title">
Explore some topics:
</div>
<div class="individual-topics">
<a href="/productivity" class="topic1">Productivity</a>
<a href="/orginisation" class="topic2">Orginisation</a>
<a href="/time-management" class="topic3">Time-Management</a>
</div>
</div>
<div class="recent">
<div class="homepage-recent-title">
Recent articles
</div>
<div class="hompage-recent-articles">
{{{body}}}
</div>
</div>
</div>
推荐阅读
- python - 根据 Python 中其他列的条件创建新列
- php - 删除 cookie 后,PHP 回显的导航栏项目不会出现
- php - 如何在 PHP 中动态创建网格?
- tsql - Lock\Block 使用 SPID -2 锁定表
- bootstrap-4 - 自动滚动网页
- python - 将 Pandas 时间序列转换为时间增量
- node.js - Swagger-ui 不适用于 restify 但适用于 express
- ios - 没有从 iOS 中的位置管理器获取我的当前地址
- php - 使用 mysqli 类在 PHP 中返回 MySQL 查询
- javascript - Intersection Observer API:观察视口的中心