I am struggling to create an image grid for my small comics. I want to have 2 columns and 3 rows, but all the divs end up in the same place. I tried using display: flex, but it didn't work as expected. Additionally, I want the grid to be responsive, but currently I can only position the images fixedly. I'm at a loss on how to create a responsive and organized grid. Any help would be greatly appreciated.
const menu = document.querySelector('#toggle');
const menuItems = document.querySelector('#overlay');
const menuContainer = document.querySelector('.menu-container');
const menuIcon = document.querySelector('i');
function toggleMenu(e) {
menuItems.classList.toggle('open');
menuContainer.classList.toggle('full-menu');
menuIcon.classList.toggle('fa-bars');
menuIcon.classList.add('fa-times');
e.preventDefault();
}
menu.addEventListener('click', toggleMenu, false);@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
@import url("https://fonts.googleapis.com/css?family=Titan+One");
body {
background: linear-gradient(45deg, #7b00e0, #ff006a);
margin: 0;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
/* More CSS code here */
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="menu-container" id="toggle">
<a href="#" class="menu" ><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
</div>
</body>
</html>