媒體查詢未正確應用於 CSS 網格？

Question

我正在嘗試為 CSS 網格下最小寬度為 501px 和最大寬度為 768px 的設備應用媒體。

下面是我單獨編寫的 html 和 CSS 代碼。 媒體查詢適用於小型設備（即最大寬度：500px），但不適用於中型設備。

 .container { display: grid; grid-template-areas: "header header header header" "content content content sidebar" "box-1 box-2 box-3 box-4" "footer footer footer footer"; grid-gap: 1rem; } .header, .content, .sidebar, .box-1, .box-2, .box-3, .box-4, .footer { border: 1px #ccc solid; padding: 0.5rem; } .header { grid-area: header; } .content { grid-area: content; } .sidebar { grid-area: sidebar; } .box-1 { grid-area: box-1; } .box-2 { grid-area: box-2; } .box-3 { grid-area: box-3; } .footer { grid-area: footer; text-align: center; } @media (min-width: 501px) and (max-width: 768px) { .container { grid-template-areas: "header header" "content sidebar" "box-1 box-1" "box-2 box-2" "box-3 box-3" "box-4 box-4" "footer"; } } @media (max-width: 500px) { .container { grid-template-areas: "header" "content" "sidebar" "box-1" "box-2" "box-3" "box-4" "footer"; } }

 <div class="container"> <header class="header"> <h1>My Website</h1> </header> <section class="content"> <h3>Welcome To My Site</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus eos et mollitia velit vel molestias sint dolore at doloremque neque minima optio ad tempore quisquam perferendis esse non. Aliquam illum doloremque architecto! Rem voluptas at sunt sed enim eius laborum dolores quaerat? </p> </section> <aside class="sidebar"> <h3>Contact Us</h3> <ul> <li>Some Company</li> <li>50 Main st, Boston MA</li> <li>something@something.com</li> <li>555-555-5555</li> </ul> </aside> <div class="box-1"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <div class="box-2"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <div class="box-3"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <div class="box-4"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <footer class="footer"> <p>Copyright &copy; 2019</p> </footer> </div>

當最小寬度為 501 像素和最大寬度為 768 像素時，我想為每個框取 2 列。

當 max-width: 500px 而不是當我寫 min-width 是 501px 和 max-width 768px 時它需要 1 列

Answer 1

嘗試從@media (min-width: 501px) and (max-width: 768px)刪除不必要的元素：

 .container { display: grid; background-color: lightpink; grid-template-areas: "header header header header" "content content content sidebar" "box-1 box-2 box-3 box-4" "footer footer footer footer"; grid-gap: 1rem; } .header, .content, .sidebar, .box-1, .box-2, .box-3, .box-4, .footer { border: 1px #ccc solid; padding: 0.5rem; } .header { grid-area: header; } .content { grid-area: content; } .sidebar { grid-area: sidebar; } .box-1 { grid-area: box-1; } .box-2 { grid-area: box-2; } .box-3 { grid-area: box-3; } .footer { grid-area: footer; text-align: center; } @media (min-width: 501px) and (max-width: 768px) { .container { background-color: lightgreen; grid-template-areas: "header" "content" "sidebar" "box-1" "box-2" "box-3" "box-4" "footer"; } } @media (max-width: 500px) { .container { background-color: orange; grid-template-areas: "header" "content" "sidebar" "box-1" "box-2" "box-3" "box-4" "footer"; } }

 <div class="container"> <header class="header"> <h1>My Website</h1> </header> <section class="content"> <h3>Welcome To My Site</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus eos et mollitia velit vel molestias sint dolore at doloremque neque minima optio ad tempore quisquam perferendis esse non. Aliquam illum doloremque architecto! Rem voluptas at sunt sed enim eius laborum dolores quaerat? </p> </section> <aside class="sidebar"> <h3>Contact Us</h3> <ul> <li>Some Company</li> <li>50 Main st, Boston MA</li> <li>something@something.com</li> <li>555-555-5555</li> </ul> </aside> <div class="box-1"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <div class="box-2"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <div class="box-3"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <div class="box-4"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <footer class="footer"> <p>Copyright &copy; 2019</p> </footer> </div>

Answer 2

您需要添加display: grid; 每次

你忘了創建.box-4 { grid-area: box-4; } .box-4 { grid-area: box-4; }

 .header, .content, .sidebar, .box-1, .box-2, .box-3, .box-4, .footer { border: 1px #ccc solid; padding: 0.5rem; } .header { grid-area: header; } .content { grid-area: content; } .sidebar { grid-area: sidebar; } .box-1 { grid-area: box-1; } .box-2 { grid-area: box-2; } .box-3 { grid-area: box-3; } .box-4 { grid-area: box-4; } .footer { grid-area: footer; text-align: center; } .container { display: grid; grid-template-areas: "header header header header" "content content content sidebar" "box-1 box-2 box-3 box-4" "footer footer footer footer"; grid-gap: 1rem; } @media (min-width: 501px) and (max-width: 768px) { .container { display: grid; grid-template-areas: "header header" "content sidebar" "box-1 box-1" "box-2 box-2" "box-3 box-3" "box-4 box-4" "footer footer"; } } @media (max-width: 500px) { .container { display: grid; grid-template-areas: "header" "content" "sidebar" "box-1" "box-2" "box-3" "box-4" "footer"; } }

 <div class="container"> <header class="header"> <h1>My Website</h1> </header> <section class="content"> <h3>Welcome To My Site</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus eos et mollitia velit vel molestias sint dolore at doloremque neque minima optio ad tempore quisquam perferendis esse non. Aliquam illum doloremque architecto! Rem voluptas at sunt sed enim eius laborum dolores quaerat? </p> </section> <aside class="sidebar"> <h3>Contact Us</h3> <ul> <li>Some Company</li> <li>50 Main st, Boston MA</li> <li>something@something.com</li> <li>555-555-5555</li> </ul> </aside> <div class="box-1"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <div class="box-2"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <div class="box-3"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <div class="box-4"> <h3>Heading</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores quisquam at veritatis a labore quod illo dolorem fugiat quas repellendus omnis odio eligendi ab, dolor necessitatibus, saepe aliquid quaerat aperiam. </p> </div> <footer class="footer"> <p>Copyright &copy; 2019</p> </footer> </div>