I have a main DIV and 10 smaller DIVs inside it to display articles. Each smaller DIV contains 2 paragraphs. The smaller DIVs resize based on the content within them, but I'm facing an issue where there is excessive space between the displayed DIVs in the main DIV.
Credit to "Rene van der Lende" for introducing me to the term "masonry layout."
Any suggestions on how to resolve this spacing problem?
Below are images and code snippets:
// CSS for the main DIV
.sve{
position: absolute;
width: 1320px;
display: flex;
flex-wrap: wrap;
top: 10%;
left: 15%;
padding: 10px;
}
// CSS for the smaller DIVs
.sve .d1{
position: relative;
flex: 1;
padding: 10px;
background-color: var(--boja2);
border-radius: 10px;
margin: 10px;
height: fit-content;
}
// CSS for styling paragraphs
.sve .d1 p{
padding: 20px;
text-align: center;
color: var(--boja1);
border-radius: 10px;
}
// Code determining width based on text amount
.pN{
font-size: 25px;
font-weight: bold;
white-space: nowrap;
}
// Code determining height based on text amount
.pT{
margin-top: -30px;
font-size: 20px;
}
Website Preview: (Link)
I aim to remove the empty spaces and tightly pack the smaller DIVs together. Your understanding and input are appreciated.
Full HTML and CSS code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="body.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
</script>
</head>
<body id="b">
<!-- Rest of the HTML content -->