I am interested in creating a layout with two rows of divs that span the entire width of the screen, with a total of 14 divs in each row. These divs are fixed in size and grouped by color, with dividers separating each color group.
I am hoping to achieve equidistant spacing between the divs that span the full width of the screen without specifying a fixed width for each div in Bootstrap 4. Is there a way to accomplish this?
Here are the requirements:
- All divs are equal in size, regardless of the user's screen width. Resizing the screen should maintain the same number of divs per row.
- Divs of the same color should remain grouped together (e.g., green, blue, and orange).
- There should be dividers (in black) to separate the color groups.
- The layout should be scalable to support the addition of more divs without adjusting percentages or widths of existing elements.
- Avoid modifying or overriding the default Bootstrap classes, but custom classes can be added.
I am unsure if Bootstrap 4 or current CSS standards can assist with this challenge.
Link to example image: https://i.sstatic.net/cuGb5.jpg
Currently, I have created 12 individual divs with left floating and margins, but resizing the screen causes some divs to jump to the first row, leaving gaps below. While dividing 100 by 7 for percentage widths is a solution, it feels clunky and leaves whitespace on the container's right side. I am also unsure how to include the black dividers.
I am seeking a more efficient and modern solution. Can Bootstrap 4 help with this issue?
Current solution without black dividers: https://codepen.io/anon/pen/gvKaLW
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="rect green">1</div>
<div class="rect green">2</div>
<div class="rect blue">5</div>
<div class="rect blue"></div>
<div class="rect blue"></div>
<div class="rect orange">11</div>
<div class="rect orange"></div>
<div class="rect green">3</div>
<div class="rect green">4</div>
<div class="rect blue"></div>
<div class="rect blue"></div>
<div class="rect blue"></div>
<div class="rect orange"></div>
<div class="rect orange"></div>
</div>
</div>
</div>
CSS
.rect {
background: green;
width:12%;
height:200px;
float:left;
margin-right:10px;
margin-top:5px;
color:white;
font-size:3em;
}
.green {
background:green;
}
.blue {
background:blue;
}
.orange {
background:orange;
}