Quiero acomodar las imagenes en forma de cuadro 3x3, tres imagenes arriba y tres imagenes abajo.
Estuve intentando varias cosas en el CSS pero me parece que el error está en el HTML y no logro darme cuenta dónde está el error. Adjunto imágenes de mi código. Las imágenes se me ven una arriba de la otra y se ven en tamaño gigante, es un desastre. Dejo una foto de como se ve la página ahora, es el principio, el resto de las imágenes gigantes continúan abajo.
body {
background-size: cover;
background-position: center;
margin: 0;
text-align: center;
}
section {
padding-bottom: 3%;
}
article {
padding-bottom: 100%;
width: 80%;
max-width: 75rem
margin: auto;
position: relative;
}
ul {
list-style-type: none;
padding: 0;
}
ul .li {
display: inline;
position: relative;
z-index: 0;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="en" class = "no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MyPortfolio</title>
<meta name ="author" content="">
<meta name ="keywords" content="">
<meta name ="description" content="">
<link rel = "shortcut icon" type="imagenes/x-icon" href="img/favicon.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/estilos.css">
<script src="js/modernizr.js"></script>
<script src="js/prefixfree.js"></script>
</head>
<body>
<header>
<h1> DEVELOPER </h1>
</header>
<main>
<section>
<h2> Cursos </h2>
<article>
<h3> 2020 </h3>
<ul>
</li><a href="imagen 1"><img src = "imagenes/imagen 1.png" alt = "imagen 1" class = "img"></a></li>
</li><a href="imagen 2"><img src = "imagenes/imagen 2.png" alt = "imagen 2" class = "img"></a></li>
<li><a href="imagen 3"><img src = "imagenes/imagen 3.jpg" alt = "imagen 3" class = "img"></a></li>
<li><a href="imagen 4"><img src = "imagenes/imagen 4.png" alt = "imagen 4" class = "img"></a></li>
<li><a href="imagen 5"><img src = "imagenes/imagen 5.jpg" alt = "imagen 5" class = "img"></a></li>
<li><a href="imagen 6"><img src = "imagenes/imagen 6.png" alt = "imagen 6" class = "img"></a></li>
</div>
</ul>
</article>
</section>
</main>
</body>
</html>
</li>
, espero que sea error de tecleo al crear el ejemplo. Te sugiero intentar con flex, que es muy sencillo de usar. – Triby el 8 jul. 20 a las 21:23