Displaying 10 divs in rows - html

Question

I am having an issue with displaying divs correctly.
I am displaying information about 10 books, and I would like to do so by having 3 rows of 3 and one row for the last book. This is what my first row looks like:
desired
This is the problem I am facing: wrong
I have a template that iterates over 10 books that I get from a search result and then the outer template displays 10 templates that belong to each book.
This is my template code for each book card:
<div class="col-sm-4">
<div class="profile-card text-center">
<img class="img-responsive" src="https://images.unsplash.com/photo-1454678904372-2ca94103eca4?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<!-- <img class="img-responsive img-border center-block" src="{{imageFormatterOne}}{{getLargeImage LargeImage}}" alt=""> -->
<div class="profile-info">
<img class="profile-pic" src="https://pbs.twimg.com/profile_images/711000557742395396/jzm8hqwW.jpg">
<h2 class="hvr-underline-from-center">{{getTitle ItemAttributes}}<span>{{getAuthor ItemAttributes}}</span></h2>
<div>Publisher - {{getPublisher ItemAttributes}}<br>
Edition - {{getEdition ItemAttributes}}<br>
ISBN - {{getISBN ItemAttributes}}<br>
Publication Date - {{getPublicationDate ItemAttributes}}<br>
Media- {{getProductGroup ItemAttributes}}<br><br></div>
{{#if isVerifiedUser}}
</div>
</div>
</div>
In the outer template that calls each card template, I have wrapped each card template in a container:
<div class="container">
{{#each getSearchResults}}
{{>searchResult}}
{{/each}}
</div>
I tried doing the negative margin trick, which is why all the cards are attached vertically, but if I remove the code for that, then I face another problem which is that the div changes size to match the amount of text each card has.
To summarize I have two problems:
1) How can I display 3 cards in 3 rows and 1 row with 1 card? Edit: In addition, how could I make this responsive to larger screens? Ex: 4 per row, etc...
2) How can I set every div to a set size so every div is the same size?
Thank you very much.

Answer 1

1) How can I display 3 cards in 3 rows and 1 row with 1 card?
If you are pulling books from an array or list of some kind I would suggest using an loop that displays 3 books per row with an condition that checks if the length variable compared to the current index. If the index is greater less than or equal to the length then the book will be posted if not then it doesn't exit and nothing should be done. This way is you later add a book to the array you will not have to edit the HTML
or if you want it hard coded
use 4 rows
<div class="row">
<div class="col-md-4">book 1</div>
<div class="col-md-4">book 2</div>
<div class="col-md-4">book 3</div>
</div>
<div class="row">
<div class="col-md-4">book 4</div>
<div class="col-md-4">book 5</div>
<div class="col-md-4">book 6</div>
</div>
<div class="row">
<div class="col-md-4">book 7</div>
<div class="col-md-4">book 8</div>
<div class="col-md-4">book 9</div>
</div>
<div class="row">
<div class="col-md-4">book 10</div>
<div class="col-md-8"></div>
</div>
2) How can I set every div to a set size so every div is the same size?
If you want to create a style that ever book should follow
I would suggest Putting an outer around your current template for each book and give that div a class name
<div class="book">
<!-- you template -->
</div>
Now you can style this section uniformly using css
.book {
height: <what you want>;
width: <what you want>;
}

Answer 2

try to separate the 4 divs so each is on its own row:
<code>
div1 id=card1, id=card2, id=card3 />
div2 3 cards />
div3 3 cards />
div4 1 card />
then set style rules.
#card1 {
margin: x x x x;
}
#div1 {
margin-bottom: x x x x;
}
</code>
should work ok!

Answer 3

You can split the array in chunk of 3 and loop trough this chunks creating the div row container and displaying the 3 books in the col-*-4 columns.