在移动视图中，我的网格项目以一种我不想要的方式显示.(请看调整到583px左右的页面)
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 70px 10% 50px 10%;
font-family: Poppins, sans-serif;
color: #4E5060;
background-color: #FAFAFA;
display: grid;
justify-content: center;
}
header {
text-align: center;
margin-inline: auto;
width: 50%;
}
header h1 {
font-weight: 200;
margin-bottom: 20px;
}
p {
color: #A7A6AA;
}
header p {
margin-bottom: 50px;
}
.bold {
font-weight: bold;
}
.main-grid {
display: grid;
grid-template-columns: repeat(3, 350px);
grid-template-rows: repeat(4, .5fr);
gap: 30px;
}
.card {
background-color: #fff;
padding: 25px 35px;
height: 255px;
box-shadow: 0 10px 10px #ddd;
border-radius: 8px;
min-width: 350px;
max-width: 350px;
margin-inline: auto;
}
.card:nth-of-type(1) {
grid-row: 2/4;
border-top: 5px solid hsl(180, 62%, 55%);
}
.card:nth-of-type(2) {
grid-column: 2 / 3;
grid-row: 1 / 3;
border-top: 5px solid hsl(0, 78%, 62%);
}
.card:nth-of-type(3) {
grid-column: 2 / 3;
grid-row: 3 / 5;
border-top: 5px solid hsl(34, 97%, 64%);
}
.card:nth-of-type(4) {
grid-column: 3 / 4;
grid-row: 2 / 4;
border-top: 5px solid hsl(212, 86%, 64%);
}
.card h3 {
margin-bottom: 10px;
}
.card p {
font-size: 14px;
}
@media (min-width: 601px) and (max-width: 1200px) {
header {
width: 100%;
}
.main-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.card {
margin-inline: initial;
}
.card:nth-of-type(1) {
grid-column: 1;
grid-row: 1;
margin-left: auto;
}
.card:nth-of-type(2) {
grid-column: 2;
grid-row: 1;
}
.card:nth-of-type(3) {
grid-column: 1;
grid-row: 2;
margin-left: auto;
}
.card:nth-of-type(4) {
grid-column: 2;
grid-row: 2;
}
}
@media (max-width: 600px) {
.main-grid {
grid-template-columns: 1fr;
}
header {
width: 100%;
}
.card {
min-width: 350px;
max-width: initial;
}
.card:nth-of-type(1) {
grid-column: 1;
grid-row: 1;
}
.card:nth-of-type(2) {
grid-column: 1;
grid-row: 2;
}
.card:nth-of-type(3) {
grid-column: 1;
grid-row: 3;
}
.card:nth-of-type(4) {
grid-column: 1;
grid-row: 4;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
</head>
<body>
<header>
<h1>Reliable, efficient delivery<br><span class="bold">Powered by Technology</span>
</h1>
<p>Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful</p>
</header>
<section class="main-grid">
<div class="card">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblocks</p>
</div>
<div class="card">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal team for your project</p>
</div>
<div class="card">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality</p>
</div>
<div class="card">
<h3>Calculator</h3>
<p>Uses data from past projects to provide better delivery estimates</p>
</div>
</section>
</body>
</html>页面上的第二张和第四张卡片很大，就像我想要的(和期望的那样)，而其他两张卡片更小.换句话说，它没有均匀地调整大小.
我怎样才能得到我想要的所有4张卡都是相同宽度的行为？(如果你继续将视区缩小到370px，栅格确实是这样的行为)
此外，我将媒体查询设置为600px，但我注意到它不会改变，直到我将浏览器大小调整到约450px？有人知道这是为什么吗？