Is it possible to limit the number of divs displayed per row? I'm working on a Django project and would like to have a maximum of 3 divs per row. Ideally, this would automatically create a new line after every third div without using JavaScript. Any suggestions or solutions would be greatly appreciated. Thank you in advance.
.main-section{
background: white;
text-align: center;
border: solid 1px #D1BEA8;
}
.book-list-main{
display: table;
table-layout: fixed;
border-spacing: 30px;
}
.single-book{
display: table-cell;
width: 310px;
height: 400px;
margin: 0 20px 20px 10px;
grid-column-start: 1;
border: solid 1px #D1BEA8;
height: fit-content;
}
.img-description-container{
display: flex;
}
.single-book h1{
font-size: 20px;
}
.img-description-container img{
max-width: 180px;
max-height: 240px;
float: left;
}
.img-description-container p{
float: right;
font-size: 12px;
overflow-y: scroll;
margin-top: 50px;
}
.author-display{
display: flex;
flex-direction: column;
}
...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tryy.css">
</head>
<body>
<div class="book-list-main">
<div class="single-book">
<h1>BOOK TITLE</h1>
<hr>
<div class="img-description-container">
<img src="images/cover.png" alt="Book Cover">
<div class="author-display">
<p>info about it</p>
<span><strong>Author:</strong> ...</span>
</div>
</div>
<div class="single-book-footer">
<p><span class="votes-total" data-hover="(214 Votes)">☆ <strong>4.6/5</strong> </span></p>
<button>Add to Shelf</button>
<button>Add Review</button>
</div>
</div>
...
</div>
</div>
</body>
</html>