英文:
I don't understand this code for rows in media (css)
问题
我不明白这段用于卡片的代码。
卡片容器的样式如下，容器的高度初始设置为100%，宽度自动适应：
.container-cards {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, 600px);
gap: 1em;
}
但是，当我尝试添加媒体查询代码时，它对所有卡片都不起作用，高度不再相同。如果我将行的定义更改为以下内容，高度将固定为600px：
@media (max-width: 767px) {
/* 小屏幕：每行只有1个卡片 */
.container-cards {
grid-template-rows: auto;
grid-template-columns: 1fr;
}
}
我不明白为什么这段代码对自动行高度不起作用。
英文:
Hi I don't understand this code for cards
my container for cards is this before heigh of container is 100% and width is auto
.container-cards {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, 600px);
gap: 1em;
}
but when I tried to type media code it deosnt work for all cards the hegiht isnt the same like from the start. If I write instead for rows this grid-template-rows: repeat(5, 600px) the height will be fixed. I don't understand why this code doesn't work for rows set to auto.
@media (max-width: 767px) {
/* Small screens: 1 card in a row */
.container-cards {
grid-template-rows: auto;
grid-template-columns: 1fr;
}
}
答案1
得分: 1
这是因为你引用了错误的类。
@media (max-width: 767px) {
/* 小屏幕：一行显示一个卡片 */
.container-cards {
grid-template-rows: auto;
grid-template-columns: 1fr;
}
}
你需要在媒体查询规则中针对相同的类来改变内容在不同屏幕尺寸下的大小和位置。
英文:
It's because you are referencing to wrong class
@media (max-width: 767px) {
/* Small screens: 1 card in a row */
.container-cards {
grid-template-rows: auto;
grid-template-columns: 1fr;
}
}
You need to target same class in media rule for it to change size and position of content on different screen sizes
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论