使用 CSS Grid 进行媒体查询
大家好，今天我将向大家展示如何将媒体查询与 CSS 网格结合使用，在网页中创建一个响应式网格系统。
让我们开始吧……
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" />
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="container">
<div class="elements">1</div>
<div class="elements">2</div>
<div class="elements">3</div>
<div class="elements">4</div>
<div class="elements">5</div>
<div class="elements">6</div>
<div class="elements">7</div>
<div class="elements">8</div>
<div class="elements">9</div>
<div class="elements">10</div>
<div class="elements">11</div>
<div class="elements">12</div>
<div class="elements">13</div>
<div class="elements">14</div>
<div class="elements">15</div>
<div class="elements">16</div>
<div class="elements">17</div>
<div class="elements">18</div>
<div class="elements">19</div>
<div class="elements">20</div>
<div class="elements">21</div>
<div class="elements">22</div>
<div class="elements">23</div>
<div class="elements">24</div>
<div class="elements">25</div>
<div class="elements">26</div>
<div class="elements">27</div>
<div class="elements">28</div>
<div class="elements">29</div>
<div class="elements">30</div>
<div class="elements">31</div>
<div class="elements">32</div>
<div class="elements">33</div>
<div class="elements">34</div>
<div class="elements">35</div>
<div class="elements">36</div>
<div class="elements">37</div>
<div class="elements">38</div>
<div class="elements">39</div>
<div class="elements">40</div>
<div class="elements">41</div>
<div class="elements">42</div>
<div class="elements">43</div>
<div class="elements">44</div>
<div class="elements">45</div>
<div class="elements">46</div>
<div class="elements">47</div>
<div class="elements">48</div>
<div class="elements">49</div>
<div class="elements">50</div>
</div>
</body>
</html>
- 这里我们创建了一个名为“container”的div元素，并在其中创建了40个名为“elements”的div元素。
CSS -
.container{
/* box model properties */
margin: 3rem auto;
padding: 2rem;
/* display properties */
display: grid;
grid-template-columns: repeat(5,1fr);
place-items: center;
gap: 20px 30px;
/* UI properties */
background-color: darkslateblue;
border-radius: 10px;
}
.elements{
/* box model properties */
padding: 1rem 2rem;
/* Display Properties */
text-align: center;
/* UI Properties */
background-color: rgb(169, 158, 238);
border-radius: 6px;
color: rgb(41, 42, 43);
}
/* Mobile View */
@media screen and (min-width:250px) and (max-width:480px) {
.container{
grid-template-columns: repeat(1,1fr);
}
}
/* Tablet View */
@media screen and (min-width:481px) and (max-width:768px) {
.container{
grid-template-columns: repeat(3,1fr);
}
}
/* Laptop View */
@media screen and (min-width:769px) and (max-width:1024px) {
.container{
grid-template-columns: repeat(4,1fr);
}
}
- 这里我们使用 display:grid 属性将 div 设置为网格，并使用 grid-template-columns:repeat(5,1fr) 创建了一个 5 列 8 行的网格（8 x 5 = 40 个元素），gap:20px 30px 表示行间距为 20px，列间距为 30px，place-items:center 表示项目将在水平和垂直方向上居中。
- 然后我们对容器类进行了常规样式设置。
- 然后我们为所有类名为“elements”的div元素设置了样式。
- 然后我们为移动视图创建了一个媒体查询，设置了 (min-width:250px) 和 (max-width:480px)，并在其中设置了 grid-template-columns:repeat(1,1fr)，这意味着在 250px 到 480px 之间，容器将只有一列和 40 行，这是为移动用户准备的。
- 然后我们为平板电脑视图创建了一个媒体查询，设置了 (min-width:481px) 和 (max-width:768px)，并在其中设置了 grid-template-columns:repeat(3,1fr)，这意味着在 481px 到 768px 之间，容器将有 3 列和 17 行，这是为平板电脑用户准备的。
- 然后我们为平板电脑视图创建了一个媒体查询，设置了 (min-width:769px) 和 (max-width:1024px)，并在其中设置了 grid-template-columns:repeat(3,1fr)，这意味着在 769px 到 1024px 之间，容器将有 4 列和 13 行，这是为小屏幕或笔记本电脑用户准备的。
- 屏幕尺寸大于 1024 像素时，网格默认设置为 5 列 10 行。
这篇帖子就到这里啦。
感谢阅读！如果您发现任何错误或有任何建议，请在评论区留言。
^^您可以通过以下链接捐赠支持我，谢谢！👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
另请参阅这些帖子：
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h
https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk
https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj
文章来源：https://dev.to/shubhamtiwari909/media-query-with-css-grid-1l7a