[英]CSS grid is not turning into 5 columns with media queries
我有一个反应组件,我在其中使用了styled-components
。 请查看本文底部的 HTML 版本。 在这个组件中, ListingContainer
最初有 6 列。 当浏览器的宽度达到1080px
时,我想将其设为 5 列。 我正在使用grid-template-columns: repeat(5, 1fr);
但是当我在 chrome 浏览器中检查它时,它在 css 代码中显示了 5 列,但在显示/浏览器上它仍然显示了 6 列。 我怎样才能解决这个问题并使它工作?
这是我的反应组件。
import "./styles.css";
import styled from 'styled-components';
import { Link } from 'react-router-dom';
const ListingWrapper = styled.div`
max-width: 1366px;
font-family: Roboto;
`;
const ListingContainer = styled.div`
box-sizing: border-box;
max-width: 1196px;
margin: 10px auto 0;
padding: 40px 100px;
background-color: #ffffff;
display: grid;
grid-template-columns: repeat(6, 1fr); // here columns are 6.
grid-template-rows: 1fr auto;
grid-gap: 10px;
@media (max-width: 1080px) {
grid-template-columns: repeat(5, 1fr); // Here I am resetting columns to 5 but it is not working.
}
@media (max-width: 840px) {
padding: 40px 14px;
}
`;
const ProductContainer = styled(Link)`
display: block;
width: 140px;
text-decoration: none;
border: 1px solid #D8D8D8;
`;
const ImageFigure = styled.figure`
margin: 0;
padding: 0;
`;
const ProductImage = styled.img`
width: 100%;
`;
const Caption = styled.figcaption`
padding: 10px;
`;
const ProductTitle = styled.span`
font-weight: 500;
font-size: 12px;
color: #4D4D4D;
`;
const ProductPrice = styled.span`
display: block;
margin-top: 10px;
font-weight: 700;
font-size: 14px;
color: #E01A1A;
`;
const App = () => {
return (
<ListingWrapper>
<ListingContainer>
<ProductContainer to=''>
<ImageFigure>
<ProductImage src='https://via.placeholder.com/150' alt='' />
<Caption>
<ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
<ProductPrice>$12,00</ProductPrice>
</Caption>
</ImageFigure>
</ProductContainer>
<ProductContainer to=''>
<ImageFigure>
<ProductImage src='https://via.placeholder.com/150' alt='' />
<Caption>
<ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
<ProductPrice>$12,00</ProductPrice>
</Caption>
</ImageFigure>
</ProductContainer>
<ProductContainer to=''>
<ImageFigure>
<ProductImage src='https://via.placeholder.com/150' alt='' />
<Caption>
<ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
<ProductPrice>$12,00</ProductPrice>
</Caption>
</ImageFigure>
</ProductContainer>
<ProductContainer to=''>
<ImageFigure>
<ProductImage src='https://via.placeholder.com/150' alt='' />
<Caption>
<ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
<ProductPrice>$12,00</ProductPrice>
</Caption>
</ImageFigure>
</ProductContainer>
<ProductContainer to=''>
<ImageFigure>
<ProductImage src='https://via.placeholder.com/150' alt='' />
<Caption>
<ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
<ProductPrice>$12,00</ProductPrice>
</Caption>
</ImageFigure>
</ProductContainer>
<ProductContainer to=''>
<ImageFigure>
<ProductImage src='https://via.placeholder.com/150' alt='' />
<Caption>
<ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
<ProductPrice>$12,00</ProductPrice>
</Caption>
</ImageFigure>
</ProductContainer>
</ListingContainer>
</ListingWrapper>
);
}
export default App;
这是代码和框链接。
https://codesandbox.io/s/hopeful-colden-tmjr6?file=/src/App.js:0-3033
更新
这是此代码的 html 版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.listingWrapper {
max-width: 1366px;
font-family: Roboto;
}
.listingContainer {
box-sizing: border-box;
max-width: 1196px;
margin: 10px auto 0;
padding: 40px 100px;
background-color: #ffffff;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr auto;
grid-gap: 10px;
@media (max-width: 1080px) {
grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 840px) {
padding: 40px 14px;
}
}
.productContainer {
display: block;
width: 140px;
text-decoration: none;
border: 1px solid #d8d8d8;
}
figure {
margin: 0;
padding: 0;
}
img {
width: 100%;
}
figcaption {
padding: 10px;
}
.productTitle {
font-weight: 500;
font-size: 12px;
color: #4d4d4d;
}
.productPrice {
display: block;
margin-top: 10px;
font-weight: 700;
font-size: 14px;
color: #e01a1a;
}
</style>
</head>
<body>
<div class="listingWrapper">
<div class="listingContainer">
<a class="productContainer" href="">
<figure>
<img src="https://via.placeholder.com/150" alt="" />
<figcaption>
<span class="productTitle">Lorem ipsum dolor sit amet</span>
<span class="productPrice">$12,00</span>
</figcaption>
</figure>
</a>
<a class="productContainer" href="">
<figure>
<img src="https://via.placeholder.com/150" alt="" />
<figcaption>
<span class="productTitle">Lorem ipsum dolor sit amet</span>
<span class="productPrice">$12,00</span>
</figcaption>
</figure>
</a>
<a class="productContainer" href="">
<figure>
<img src="https://via.placeholder.com/150" alt="" />
<figcaption>
<span class="productTitle">Lorem ipsum dolor sit amet</span>
<span class="productPrice">$12,00</span>
</figcaption>
</figure>
</a>
<a class="productContainer" href="">
<figure>
<img src="https://via.placeholder.com/150" alt="" />
<figcaption>
<span class="productTitle">Lorem ipsum dolor sit amet</span>
<span class="productPrice">$12,00</span>
</figcaption>
</figure>
</a>
<a class="productContainer" href="">
<figure>
<img src="https://via.placeholder.com/150" alt="" />
<figcaption>
<span class="productTitle">Lorem ipsum dolor sit amet</span>
<span class="productPrice">$12,00</span>
</figcaption>
</figure>
</a>
<a class="productContainer" href="">
<figure>
<img src="https://via.placeholder.com/150" alt="" />
<figcaption>
<span class="productTitle">Lorem ipsum dolor sit amet</span>
<span class="productPrice">$12,00</span>
</figcaption>
</figure>
</a>
</div>
</div>
</body>
</html>
这是沙箱链接
https://codesandbox.io/s/magical-grass-vfvqz?file=/index.html:0-3602
媒体查询不应附加在单个类中。 您应该将它放在类选择器之外,但在样式标签内,并将您的响应式样式包装在类选择器中以用于特定的媒体查询宽度
尝试用以下内容替换您的样式:
<style> @media (max-width: 1080px) { .listingContainer { grid-template-columns: repeat(5, 1fr) !important; } } @media (max-width: 840px) { .listingContainer { padding: 40px 14px !important; } } .listingWrapper { max-width: 1366px; font-family: Roboto; } .listingContainer { box-sizing: border-box; max-width: 1196px; margin: 10px auto 0; padding: 40px 100px; background-color: #ffffff; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr auto; grid-gap: 10px; } .productContainer { display: block; width: 140px; text-decoration: none; border: 1px solid #d8d8d8; } figure { margin: 0; padding: 0; } img { width: 100%; } figcaption { padding: 10px; } .productTitle { font-weight: 500; font-size: 12px; color: #4d4d4d; } .productPrice { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; color: #e01a1a; } </style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.