如何制作响应式网格？

Question

So I have a html and css with a specific grid, I already made the.css, but I'm missing something, normally its the col-md or col-sm into the html using bootstraps, but everytime that I tried still not working for all devices, can anyone helpe me?所以我有一个带有特定网格的 html 和 css，我已经制作了 .css，但我遗漏了一些东西，通常是使用引导程序将 col-md 或 col-sm 放入 html，但每次我尝试仍然无法正常工作对于所有设备，任何人都可以帮助我吗？

 .container { display: grid; grid-template-columns: 285px 285px 285px 400px; grid-template-rows: 142px 296px 259px 333px; grid-auto-rows: 1fr; gap: 5px 5px; grid-auto-flow: row; grid-template-areas: "AB C D" "EB C D" "FGHD" "IIII"; width: 1440px; height: 1239px; }.A { grid-area: A; width: 259px; height: 122px; }.B { grid-area: B; width: 259px; height: 416px; }.C { grid-area: C; width: 259px; height: 416px; }.D { grid-area: D; width: 380px; height: 668px; }.E { grid-area: E; width: 259px; height: 273.87px; }.F { grid-area: F; width: 259px; height: 230px; }.G { grid-area: G; width: 259px; height: 230px; }.H { grid-area: H; width: 259px; height: 230px; }.I { grid-area: I; width: 1252px; height: 335px; } html, body { height: 100%; margin: 0; }.container * { border: 1px solid red; position: relative; }.container *:after { content:attr(class); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; align-items: center; justify-content: center; } @media (min-width: 575.98px) {.container { grid-template-columns: repeat(1, 1fr); } } @media (min-width: 767.98px) {.container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 991.98px) {.container { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1199.98px) {.container { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1399.98px) {.container { grid-template-columns: repeat(4, 1fr); } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>This is a example</title> <link rel="stylesheet" type="text/css" href="/dashboard.css"> </head> <body> <section class="content"> <div class="container"> <div class="A"></div> <div class="B"></div> <div class="C"></div> <div class="D"></div> <div class="E"></div> <div class="F"></div> <div class="G"></div> <div class="H"></div> <div class="I"></div> </div> </section> </body> </html>

Id tried to use col-sm-3 col-md-3 col-lg-3 col-xl-3 into html but didnt work;我尝试将 col-sm-3 col-md-3 col-lg-3 col-xl-3 用于 html 但没有用；

Answer 1

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <style>:container { display; grid: grid-template-columns; 1fr 1fr 1fr 2fr: grid-auto-rows; 100px: gap; 5px: width; 100%: height; 100%, } html: body { height; 100%: margin; 0. }:container * { border; 1px solid red: } @media (max-width.1200px) {:container { grid-template-columns; 1fr 1fr 1fr: } } @media (max-width.1000px) {:container { grid-template-columns; 1fr 1fr: } } @media (max-width.600px) {:container { grid-template-columns; 1fr; } } </style> </head> <body> <section class="content"> <div class="container"> <div class="A"></div> <div class="B"></div> <div class="C"></div> <div class="D"></div> <div class="E"></div> <div class="F"></div> <div class="G"></div> <div class="H"></div> <div class="I"></div> </div> </section> </body> </html>

如何制作响应式网格？

问题描述

1 个解决方案

解决方案1
0 2023-01-24 18:29:00

如何制作响应式网格？

问题描述

1 个解决方案

解决方案1 0 2023-01-24 18:29:00

解决方案1
0 2023-01-24 18:29:00