Make elements fill given space equally - html

Question

I would like to have layout of div elements that looks like below:
If screen is large enough then there is many blocks in the single row.
For example, I would like to have minimum width of each block set to 250px.
So on large screens I can have the following for such elements. On the right is the map (closable), if user hide it then there will be 6 blocks in the row.
Next when I shrink the browser window horizontally this all block doesn't fit in the row so they move to the next row. Ok this works now in that way that they go do second row, but they leave space between div blocks and the map. Like on the below image.
I would like to have such layout where if 4 blocks doesn't fit the space then ok there is 3 blocks but they equally fill the remaining space (without this remaining yellow space). See pictures below.
Then when browser windows shrinks more it should look like below
And on mobile devices and very narrow browser windows:
Ok I could achieve something like this using such CSS style:
#parent {
display: flex;
flex-wrap: wrap;
}
.child {
width: calc(33% - 15px);
margin-left: 10px;
margin-top: 10px;
margin-bottom: 20px;
min-width: 250px;
}
then I should manually change this using media queries:
calc(25% - 15px) //lg
calc(33% - 15px) //md
calc(50% - 15px) //sm
calc(100% - 15px) //xs
maybe even this when map disappears
calc(16.667% - 15px) //lg+no map
Ok FLEX isn't so backward-compatible so I could play even more and do something like this:
#parent {
}
.child {
width: calc(33% - 15px);
margin-left: 10px;
margin-top: 10px;
margin-bottom: 20px;
min-width: 250px;
float: left;
}
then also change this width depending on screen size manually
and add clear: left after last element using
.block-offer:nth-last-child(1):after {
clear: left;
}
or before other elements make some other clearfix
or even (is it necessery?) add clear: left after each row using:
.block-offer:nth-child(4n+1) {
clear:left;
}
.block-offer:nth-child(3n+1) {
clear:left;
}
.block-offer:nth-child(2n+1) {
clear:left;
}
.block-offer:nth-child(1n+1) {
clear:left;
}
like with this width: calc() depending on screen size and divs witdh
But then I need to use many media queries and I would like to wrap this CSS in some angular 2+ component and have there only such things like:
<blocks-container max-cols="6">
<block min-width="250px"></block>
<block min-width="250px"></block>
...
</blocks-container>
I think that using #media queries will improve a little this behaviour but my components will tightly coupled with screen size and I think there wasn't as generic as I would like them to be to flexibly specify max-cols and min-widths.

Answer 1

Here's one possible solution, which combines CSS flexbox and grid:
body {
display: flex; /* 1 */
}
article { /* 2 */
flex: 1; /* 2 */
margin-right: 10px;
display: grid; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 4 */
grid-auto-rows: 100px; /* 5 */
grid-gap: 10px; /* 6 */
}
map {
min-height: 200px; /* 7 */
width: 250px;
background-color: orangered;
}
#media (max-width: 800px) { /* 8 */
map { display: none; }
}
section {
background-color: lightblue;
border: 2px solid gray;
}
<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
<map></map>
jsFiddle
Notes:
Create a flex container with two flex items.
The first item (article) holds the wrapping blocks (section). It's set to flex: 1 to consume all available width.
The first item is made into a grid container, so grid properties can be
applied to the blocks.
See below.
The grid-auto-rows property sets the height of automatically generated rows.
The grid-gap property is a shorthand for grid-column-gap and grid-row-gap. This rule set a 10px gap between grid items.
The second flex item is the map (map), which is aligned right due to flex: 1 on its sibling.
The media query removes the map, to simulate user behavior.
The auto-fill function allows the grid to line up as many grid tracks (columns or rows) as possible without overflowing the container. This can create similar behavior to flex layout's flex-wrap: wrap.
The minmax() function sets a minimum and maximum size range for a grid track. In the code above, the width of column tracks will be a minimum of 250px and maximum of whatever free space is available (1fr). This prevents the display of empty space.
The fr unit represents a fraction of the available space. It is similar to flex-grow in flex layout.
Browser Support for CSS Grid
Chrome - full support as of March 8, 2017 (version 57)
Firefox - full support as of March 6, 2017 (version 52)
Safari - full support as of March 26, 2017 (version 10.1)
Edge - full support as of October 16, 2017 (version 16)
IE11 - no support for current spec; supports obsolete version
Here's the complete picture: http://caniuse.com/#search=grid

Answer 2

You could refer this as an example, you could do that using flex or using media query to change style for elements at different break points as below, this gives more understanding of what changes are made.
Check this jsFiddle - https://jsfiddle.net/sjf5ms08/
#box{
width:100%;
height:auto;
}
#box > .b1, .b2, .b3, .b4, .b5, .b6{
width:33%;
height:150px;
background:red;
display:inline-block;
}
#media screen and (max-width: 1280px){
#box > .b1, .b2, .b3, .b4, .b5, .b6{
width:250px;
height:150px;
margin-bottom:10px;
background:blue;
}
}
#media screen and (max-width: 940px){
#box > .b1, .b2, .b3, .b4, .b5, .b6{
width:33%;
margin-bottom:10px;
background:yellow;
}
}
#media screen and (max-width: 760px){
#box > .b1, .b2, .b3, .b4, .b5, .b6{
width:49%;
margin-bottom:10px;
background:green;
}
}
<div id="box">
<div class="b1">1</div>
<div class="b2">2</div>
<div class="b3">3</div>
<div class="b4">4</div>
<div class="b5">5</div>
<div class="b6">6</div>
</div>

Answer 3

If you want to use the float method, you should do sth like :
FIDDLE
HTML:
<div class="col">
<div class="content">
<p>Content</p>
</div>
</div>
CSS:
/* complete with your style */
.col { display:block; width:25%; border-sizing:border:box; float:left; padding:10px; }
#media (max-width: 1280px) {
.col { width:33%; }
}
#media (max-width: 1024px) {
.col { width:50%; }
}
#media (max-width: 768px) {
.col { width:100%; }
}
If you want to use the flex method, order your html by row, then use flex-wrap:wrap; and width:250px or min-width:250px: width:25%, and play with the media queries as above

Answer 4

You can try applying flex on the cards (flex-grow/ flex-shrink/ flex-basis)
body {
margin: 0;
}
.parent {
width: 100vw;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.child:nth-child(2n+1) {
background: rgb(0, 0, 255);
}
.child:nth-child(2n+2) {
background: rgb(255, 255, 255);
}
.child:nth-child(2n+3) {
background: rgb(244, 241, 194);
}
.child {
margin: 10px 10px 20px 0;
min-width: 250px;
height: 300px;
background: green;
box-sizing: border-box;
border: 1px solid black;
flex: 1 1 250px;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Fiddle : https://jsfiddle.net/0jc93hqn/