Okay so, for a school assignment I have to make these blocks responsive and changing rows when on a certain screen width, above 1024px they have to be 2 rows going horizontally, and below 1024px 2 rows going vertically, always spelling out 'LOI'. I kind of got the result using flexbox and making the flex-direction change using a media query. But now I want the blocks being responsive so that there is no gap in between the blocks when resizing the screen (so the blocks are always the same size). Does anyone know the solution? Thanks in advance!
main {
max-width: 1024px;
margin: auto;
}
.blokken {
display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 1200px;
align-content: stretch;
}
@media screen and (min-width: 1024px) {
.blokken {
flex-direction: row;
}
}
.letter {
width: 300px;
height: 300px;
margin: 5px;
background-color: #eee;
border: 5px solid black;
font-family: sans-serif;
font-size: 5em;
color: black;
display: flex;
justify-content: center;
align-items: center;
border-radius: 25%;
overflow: hidden;
}<!DOCTYPE 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="style.css">
<title>Nederland versteend</title>
</head>
<body>
<main>
<h2 id="letterblokjes">Letterblokjes</h2>
<div class="blokken">
<div class="letter">L</div>
<div class="letter">O</div>
<div class="letter">I</div>
<div class="letter">L</div>
<div class="letter">O</div>
<div class="letter">I</div>
</div>
</main>
</body>
</html>