我正在尝试将这 8 个图像插入到 CSSGrid 中。我将网格设置为 4 列和 2 行。我将 img 的高度和宽度设置为 100%，认为它会占用每行一列的空间。相反，图像比预期的要大得多。我使用嵌套网格，我认为我没有正确实现。例如，我将图像的宽度和高度设置为300px，一行将有4张以上的图片。我认为这是因为图像没有占据整个列的大小，但我不确定。当我检查元素时，我似乎看不到 CSSGrid 有什么帮助吗？
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="zone green">
<span>About</span>
<span>Products</span>
<span>Our Team</span>
<span id="Contact">Contact</span>
</div>
<div class="zone red">Cover</div>
<div class="zone blue">
<img src="data_storage_2_2.png" alt="data storage">
<img src="desktop_analytics_2.png" alt="desktop analytics">
<img src="files_2.png" alt="files">
<img src="monitor_coding_2.png" alt="monitor coding">
<img src="monitor_settings_2.png" alt="monitor settings">
<img src= "server_2_2.png" alt="server">
<img src="server_3.png" alt="server">
<img src="server_safe_2.png" alt=server safe>
</div>
<div class="zone yellow">Made By Cristobal Manrique</div>
</div>
</body>
</html>
隔江千里
拉风的咖菲猫
相关分类