我有一个 CSS 网格，其中网格模板列设置为grid-template-columns: repeat(auto-fit, minmax(225px, 1fr))
当我检查移动网站的响应能力时，网格元素会变小并且不会堆叠。我正在尝试让它们在移动设备上堆叠成 1fr 列。我尝试使用媒体查询在断点处将网格模板列设置为 1fr，但这不起作用。
这是我所 https://codepen.io/Swildman/pen/ZEzqvXK 的代码笔的链接
/* variables for colors */
:root {
--highlight-color: #ff7264;
--white-color: #fff;
--text-color: #7f7f7f;
--dark-bg-color: #2e2e2e;
--light-bg-color: #fff;
--gray-bg-color: #666;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* services section */
.services-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
grid-template-rows: repeat(3, 200px);
grid-gap: 5px;
margin: 5px;
}
.cell {
background: var(--highlight-color);
text-align: center;
color: var(--white-color);
padding: 10px;
}
.cell h3 {
font-size: 20px;
}
.cell p {
line-height: 1.4em;
}
.cell-1 {
grid-column: 1/3;
grid-row: 1/3;
padding: 10px;
}
.cell-1 p,
.cell-4 p {
font-size: 20px;
line-height: 1.4em;
}
.cell-1 h3,
.cell-4 h3 {
font-size: 30px;
}
.cell-1:hover {
background-image: url("https://picsum.photos/460");
}
.cell-1:hover p,
.cell-1:hover h3 {
opacity: 0;
transition: 1000ms;
}
.cell-2 {
background-image: url("https://picsum.photos/225");
}
.cell-2 h3,
.cell-2 p {
opacity: 0;
}
.cell-2:hover {
background: var(--highlight-color);
}
.cell-2:hover h3,
.cell-2:hover p {
opacity: 1;
transition: 1000ms;
}
.cell-3 {
background-image: url("https://picsum.photos/225");
}
.cell-3 h3,
.cell-3 p {
opacity: 0;
}
.cell-3:hover {
background: var(--highlight-color);
}
.cell-3:hover h3,
.cell-3:hover p {
opacity: 1;
transition: 1000ms
}
.cell-4 {
grid-column: 3/5;
grid-row: 2/4;
padding: 10px;
}
.cell-4:hover {
background-image: url("https://picsum.photos/460");
background-repeat: no-repeat;
background-size: cover;
}
.cell-4:hover p,
.cell-4:hover h3 {
opacity: 0;
transition: 1000ms;
}
.cell-5 {
background-image: url("https://picsum.photos/225");
}
.cell-5 h3,
.cell-5 p {
opacity: 0;
}
.cell-5:hover {
background: var(--highlight-color);
}
.cell-5:hover h3,
.cell-5:hover p {
opacity: 1;
transition: 1000ms;
}
.cell-6 {
background-image: url("https://picsum.photos/225");
}
.cell-6 p,
.cell-6 h3 {
opacity: 0;
}
.cell-6:hover {
background: var(--highlight-color);
}
.cell-6:hover p,
.cell-6:hover h3 {
opacity: 1;
transition: 1000ms;
}
#services-section {
text-align: center;
margin-top: 30px;
max-width: 900px;
margin: 30px auto;
}
.services-title {
font-size: 2em;
text-shadow: 1px 1px var(--text-color);
color: var(--highlight-color);
}
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}<section id="services-section">
<h2 class="services-title">Services</h2>
<div class="services-container">
<div class="cell cell-1">
<h3>Creative Web Design Services</h3>
<p>Our web design services will greatly enhance your business’s presence on the Internet. Our designers mix a potent combination of brand strategy with a generous splash of creative juices and blend in the latest trends in Website UX and UI design.
Since 2019, S&E has designed and built over 25 Websites from e-commerce, b2c, b2b, non-profit, to social networks. We even create custom web applications.</p>
</div>
<div class="cell cell-2">
<h3>Digital Marketing</h3>
<p>Our digital marketing services are driven not only by passion, but also a driving desire to deliver exceptional sales conversions.</p>
</div>
<div class="cell cell-3">
<h3>App Development</h3>
<p>Our app development services are sought after from venture capital start-ups to fortune 100 companies.</p>
</div>
<div class="cell cell-4">
<h3>Website Maintenance</h3>
<p>Extend your Website’s Lifespan</p>
<p>By subscribing into a website maintenance plan with S&E, we can help your website keep up with the ever-changing and evolving industry.</p>
<p>S&E is one of the leading website maintenance agencies. Our web maintenance packages cover everything that your website may need – from simple content updates to extensive design updates.</p>
</div>
<div class="cell cell-5">
<h3>Web Development</h3>
<p>If you’re looking for custom Internet applications or complex web development solutions, you’ve come to the right place.</p>
</div>
<div class="cell cell-6">
<h3>Branding</h3>
<p>Branding has never been more expansive, adventurous and agile than it is today</p>
</div>
</div>
</section>最大的问题之一是媒体查询 - 您没有指定任何要应用属性的元素。
这是我更改的CSS的重要部分：
@media screen and (max-width: 768px) {
.services-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.cell-1, .cell-2, .cell-3, .cell-4, .cell-5, .cell-6 {
grid-column: auto;
grid-row: auto;
}
}
你可以看到，我还将你所有的.cell重置为auto放置。
/* variables for colors */
:root {
--highlight-color: #ff7264;
--white-color: #fff;
--text-color: #7f7f7f;
--dark-bg-color: #2e2e2e;
--light-bg-color: #fff;
--gray-bg-color: #666;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* services section */
.services-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
grid-template-rows: repeat(3, 200px);
grid-gap: 5px;
margin: 5px;
}
.cell {
background: var(--highlight-color);
text-align: center;
color: var(--white-color);
padding-top: 10px;
}
.cell h3 {
font-size: 20px;
}
.cell p {
line-height: 1.4em;
}
.cell-1 {
grid-column: 1/3;
grid-row: 1/3;
padding: 10px;
}
.cell-1 p,
.cell-4 p {
font-size: 20px;
line-height: 1.4em;
}
.cell-1 h3,
.cell-4 h3 {
font-size: 30px;
}
.cell-1:hover {
background-image: url("https://picsum.photos/460");
}
.cell-1:hover p,
.cell-1:hover h3 {
opacity: 0;
transition: 1000ms;
}
.cell-2 {
background-image: url("https://picsum.photos/225");
}
.cell-2 h3,
.cell-2 p {
opacity: 0;
}
.cell-2:hover {
background: var(--highlight-color);
}
.cell-2:hover h3,
.cell-2:hover p {
opacity: 1;
transition: 1000ms;
}
.cell-3 {
background-image: url("https://picsum.photos/225");
}
.cell-3 h3,
.cell-3 p {
opacity: 0;
}
.cell-3:hover {
background: var(--highlight-color);
}
.cell-3:hover h3,
.cell-3:hover p {
opacity: 1;
transition: 1000ms
}
.cell-4 {
grid-column: 3/5;
grid-row: 2/4;
padding: 10px;
}
.cell-4:hover {
background-image: url("https://picsum.photos/460");
background-repeat: no-repeat;
background-size: cover;
}
.cell-4:hover p,
.cell-4:hover h3 {
opacity: 0;
transition: 1000ms;
}
.cell-5 {
background-image: url("https://picsum.photos/225");
}
.cell-5 h3,
.cell-5 p {
opacity: 0;
}
.cell-5:hover {
background: var(--highlight-color);
}
.cell-5:hover h3,
.cell-5:hover p {
opacity: 1;
transition: 1000ms;
}
.cell-6 {
background-image: url("https://picsum.photos/225");
}
.cell-6 p,
.cell-6 h3 {
opacity: 0;
}
.cell-6:hover {
background: var(--highlight-color);
}
.cell-6:hover p,
.cell-6:hover h3 {
opacity: 1;
transition: 1000ms;
}
#services-section {
text-align: center;
margin-top: 30px;
max-width: 900px;
margin: 30px auto;
}
.services-title {
font-size: 2em;
text-shadow: 1px 1px var(--text-color);
color: var(--highlight-color);
}
@media screen and (max-width: 768px) {
.services-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.cell-1,
.cell-2,
.cell-3,
.cell-4,
.cell-5,
.cell-6 {
grid-column: auto;
grid-row: auto;
}
}<section id="services-section">
<h2 class="services-title">Services</h2>
<div class="services-container">
<div class="cell cell-1">
<h3>Creative Web Design Services</h3>
<p>Our web design services will greatly enhance your business’s presence on the Internet. Our designers mix a potent combination of brand strategy with a generous splash of creative juices and blend in the latest trends in Website UX and UI design.
Since 2019, S&E has designed and built over 25 Websites from e-commerce, b2c, b2b, non-profit, to social networks. We even create custom web applications.</p>
</div>
<div class="cell cell-2">
<h3>Digital Marketing</h3>
<p>Our digital marketing services are driven not only by passion, but also a driving desire to deliver exceptional sales conversions.</p>
</div>
<div class="cell cell-3">
<h3>App Development</h3>
<p>Our app development services are sought after from venture capital start-ups to fortune 100 companies.</p>
</div>
<div class="cell cell-4">
<h3>Website Maintenance</h3>
<p>Extend your Website’s Lifespan</p>
<p>By subscribing into a website maintenance plan with S&E, we can help your website keep up with the ever-changing and evolving industry.</p>
<p>S&E is one of the leading website maintenance agencies. Our web maintenance packages cover everything that your website may need – from simple content updates to extensive design updates.</p>
</div>
<div class="cell cell-5">
<h3>Web Development</h3>
<p>If you’re looking for custom Internet applications or complex web development solutions, you’ve come to the right place.</p>
</div>
<div class="cell cell-6">
<h3>Branding</h3>
<p>Branding has never been more expansive, adventurous and agile than it is today</p>
</div>
</div>
</section>这是一个有效的代码笔： https://codepen.io/chrislafrombois/pen/xxKyYPN
首先，您忘记在媒体查询中放置样式规则。您有：
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}
应该是：
@media screen and (max-width: 768px) {
.services-container {
grid-template-columns: 1fr;
}
}
其次，您需要重置所有网格项的grid-column和grid-row样式规则：
/* variables for colors */
:root {
--highlight-color: #ff7264;
--white-color: #fff;
--text-color: #7f7f7f;
--dark-bg-color: #2e2e2e;
--light-bg-color: #fff;
--gray-bg-color: #666;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* services section */
.services-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
grid-template-rows: repeat(3, 200px);
grid-gap: 5px;
margin: 5px;
}
.cell {
background: var(--highlight-color);
text-align: center;
color: var(--white-color);
padding: 10px;
}
.cell h3 {
font-size: 20px;
}
.cell p {
line-height: 1.4em;
}
.cell-1 {
grid-column: 1/3;
grid-row: 1/3;
padding: 10px;
}
.cell-1 p,
.cell-4 p {
font-size: 20px;
line-height: 1.4em;
}
.cell-1 h3,
.cell-4 h3 {
font-size: 30px;
}
.cell-1:hover {
background-image: url("https://picsum.photos/460");
}
.cell-1:hover p,
.cell-1:hover h3 {
opacity: 0;
transition: 1000ms;
}
.cell-2 {
background-image: url("https://picsum.photos/225");
}
.cell-2 h3,
.cell-2 p {
opacity: 0;
}
.cell-2:hover {
background: var(--highlight-color);
}
.cell-2:hover h3,
.cell-2:hover p {
opacity: 1;
transition: 1000ms;
}
.cell-3 {
background-image: url("https://picsum.photos/225");
}
.cell-3 h3,
.cell-3 p {
opacity: 0;
}
.cell-3:hover {
background: var(--highlight-color);
}
.cell-3:hover h3,
.cell-3:hover p {
opacity: 1;
transition: 1000ms
}
.cell-4 {
grid-column: 3/5;
grid-row: 2/4;
padding: 10px;
}
.cell-4:hover {
background-image: url("https://picsum.photos/460");
background-repeat: no-repeat;
background-size: cover;
}
.cell-4:hover p,
.cell-4:hover h3 {
opacity: 0;
transition: 1000ms;
}
.cell-5 {
background-image: url("https://picsum.photos/225");
}
.cell-5 h3,
.cell-5 p {
opacity: 0;
}
.cell-5:hover {
background: var(--highlight-color);
}
.cell-5:hover h3,
.cell-5:hover p {
opacity: 1;
transition: 1000ms;
}
.cell-6 {
background-image: url("https://picsum.photos/225");
}
.cell-6 p,
.cell-6 h3 {
opacity: 0;
}
.cell-6:hover {
background: var(--highlight-color);
}
.cell-6:hover p,
.cell-6:hover h3 {
opacity: 1;
transition: 1000ms;
}
#services-section {
text-align: center;
margin-top: 30px;
max-width: 900px;
margin: 30px auto;
}
.services-title {
font-size: 2em;
text-shadow: 1px 1px var(--text-color);
color: var(--highlight-color);
}
@media screen and (max-width: 768px) {
.services-container {
grid-template-columns: 1fr;
}
.services-container > div{
grid-column: auto;
grid-row: auto;
}
}<section id="services-section">
<h2 class="services-title">Services</h2>
<div class="services-container">
<div class="cell cell-1">
<h3>Creative Web Design Services</h3>
<p>Our web design services will greatly enhance your business’s presence on the Internet. Our designers mix a potent combination of brand strategy with a generous splash of creative juices and blend in the latest trends in Website UX and UI design.
Since 2019, S&E has designed and built over 25 Websites from e-commerce, b2c, b2b, non-profit, to social networks. We even create custom web applications.</p>
</div>
<div class="cell cell-2">
<h3>Digital Marketing</h3>
<p>Our digital marketing services are driven not only by passion, but also a driving desire to deliver exceptional sales conversions.</p>
</div>
<div class="cell cell-3">
<h3>App Development</h3>
<p>Our app development services are sought after from venture capital start-ups to fortune 100 companies.</p>
</div>
<div class="cell cell-4">
<h3>Website Maintenance</h3>
<p>Extend your Website’s Lifespan</p>
<p>By subscribing into a website maintenance plan with S&E, we can help your website keep up with the ever-changing and evolving industry.</p>
<p>S&E is one of the leading website maintenance agencies. Our web maintenance packages cover everything that your website may need – from simple content updates to extensive design updates.</p>
</div>
<div class="cell cell-5">
<h3>Web Development</h3>
<p>If you’re looking for custom Internet applications or complex web development solutions, you’ve come to the right place.</p>
</div>
<div class="cell cell-6">
<h3>Branding</h3>
<p>Branding has never been more expansive, adventurous and agile than it is today</p>
</div>
</div>
</section>我尝试使用媒体查询在断点处将网格模板列设置为 1fr，但没有奏效。
-
您未在媒体查询中指定选择器。您刚刚发布了代码，没有应用它的位置。
@media screen and (max-width: 768px) { grid-template-columns: 1fr; /* selector missing */ } -
您没有重置您定义的列和行范围。
.cell-1 { grid-column: 1/3; grid-row: 1/3; } .cell-4 { grid-column: 3/5; grid-row: 2/4; }
试试这个：
@media screen and (max-width: 768px) {
.services-container {
grid-template-columns: 1fr;
}
.cell-1, .cell-4 {
grid-column: auto;
grid-row: auto;
}
}
/* variables for colors */
:root {
--highlight-color: #ff7264;
--white-color: #fff;
--text-color: #7f7f7f;
--dark-bg-color: #2e2e2e;
--light-bg-color: #fff;
--gray-bg-color: #666;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* services section */
.services-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
grid-template-rows: repeat(3, 200px);
grid-gap: 5px;
margin: 5px;
}
.cell {
background: var(--highlight-color);
text-align: center;
color: var(--white-color);
padding-top: 10px;
}
.cell h3 {
font-size: 20px;
}
.cell p {
line-height: 1.4em;
}
.cell-1 {
grid-column: 1/3;
grid-row: 1/3;
padding: 10px;
}
.cell-1 p, .cell-4 p {
font-size: 20px;
line-height: 1.4em;
}
.cell-1 h3, .cell-4 h3 {
font-size: 30px;
}
.cell-1:hover {
background-image: url("https://picsum.photos/460");
}
.cell-1:hover p, .cell-1:hover h3 {
opacity: 0;
transition: 1000ms;
}
.cell-2 {
background-image: url("https://picsum.photos/225");
}
.cell-2 h3, .cell-2 p {
opacity: 0;
}
.cell-2:hover {
background: var(--highlight-color);
}
.cell-2:hover h3, .cell-2:hover p {
opacity: 1;
transition: 1000ms;
}
.cell-3 {
background-image: url("https://picsum.photos/225");
}
.cell-3 h3, .cell-3 p {
opacity: 0;
}
.cell-3:hover {
background: var(--highlight-color);
}
.cell-3:hover h3, .cell-3:hover p {
opacity: 1;
transition: 1000ms
}
.cell-4 {
grid-column: 3/5;
grid-row: 2/4;
padding: 10px;
}
.cell-4:hover {
background-image: url("https://picsum.photos/460");
background-repeat: no-repeat;
background-size: cover;
}
.cell-4:hover p, .cell-4:hover h3 {
opacity: 0;
transition: 1000ms;
}
.cell-5 {
background-image: url("https://picsum.photos/225");
}
.cell-5 h3, .cell-5 p {
opacity: 0;
}
.cell-5:hover {
background: var(--highlight-color);
}
.cell-5:hover h3, .cell-5:hover p {
opacity: 1;
transition: 1000ms;
}
.cell-6 {
background-image: url("https://picsum.photos/225");
}
.cell-6 p, .cell-6 h3 {
opacity: 0;
}
.cell-6:hover {
background: var(--highlight-color);
}
.cell-6:hover p, .cell-6:hover h3 {
opacity: 1;
transition: 1000ms;
}
#services-section {
text-align: center;
margin-top: 30px;
max-width: 900px;
margin: 30px auto;
}
.services-title {
font-size: 2em;
text-shadow: 1px 1px var(--text-color);
color: var(--highlight-color);
}
@media ( max-width: 600px ) {
.services-container { grid-template-columns: 1fr; grid-template-rows: auto; }
.cell-1 {
grid-column: auto;
grid-row: auto;
}
.cell-4 {
grid-column: auto;
grid-row: auto;
}
}<section id="services-section">
<h2 class="services-title">Services</h2>
<div class="services-container">
<div class="cell cell-1">
<h3>Creative Web Design Services</h3>
<p>Our web design services will greatly enhance your business’s presence on the Internet. Our designers mix a potent combination of brand strategy with a generous splash of creative juices and blend in the latest trends in Website UX and UI design.
Since 2019, S&E has designed and built over 25 Websites from e-commerce, b2c, b2b, non-profit, to social networks. We even create custom web applications.</p>
</div>
<div class="cell cell-2">
<h3>Digital Marketing</h3>
<p>Our digital marketing services are driven not only by passion, but also a driving desire to deliver exceptional sales conversions.</p>
</div>
<div class="cell cell-3">
<h3>App Development</h3>
<p>Our app development services are sought after from venture capital start-ups to fortune 100 companies.</p>
</div>
<div class="cell cell-4">
<h3>Website Maintenance</h3>
<p>Extend your Website’s Lifespan</p>
<p>By subscribing into a website maintenance plan with S&E, we can help your website keep up with the ever-changing and evolving industry.</p>
<p>S&E is one of the leading website maintenance agencies. Our web maintenance packages cover everything that your website may need – from simple content updates to extensive design updates.</p>
</div>
<div class="cell cell-5">
<h3>Web Development</h3>
<p>If you’re looking for custom Internet applications or complex web development solutions, you’ve come to the right place.</p>
</div>
<div class="cell cell-6">
<h3>Branding</h3>
<p>Branding has never been more expansive, adventurous and agile than it is today</p>
</div>
</div>
</section>