How to Make Div fill the remaining space?
Question
I'm making a grid layout, but I want the div to fill all the white space and not just side by side. I've tried everything to my knowledge, and I just cant figure it out. Is there something I'm missing?
Here is the code in JSFiddle: https://jsfiddle.net/y3s6b8dm/2/
If you look, the .sml on the right is supposed to be 4 squares, but only 2 are put, then it goes to the next line. It messes up the whole grid this way.
How I would like it to look like for blending:
body { width: 1200px; padding: 0; margin: 0; } .sml { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 200px; height: 200px; vertical-align: top; position: relative; display: inline-block; box-sizing: border-box; } .med { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 300px; height: 300px; position: relative; display: inline-block; box-sizing: border-box; } .big { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 400px; height: 400px; position: relative; display: inline-block; box-sizing: border-box; } .feat { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 1200px; height: 400px; position: relative; display: inline-block; box-sizing: border-box; } height: 200px; position: relative; display: inline-block; box-sizing: border-box; } .med { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 300px; height: 300px; position: relative; display: inline-block; box-sizing: border-box; } .big { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 400px; height: 400px; position: relative; display: inline-block; box-sizing: border-box; } .feat { background-image: url("http://placehold.it/1x1"); border: 1px #a1a1a1 solid; width: 1200px; height: 400px; position: relative; display: inline-block; box-sizing: border-box; }
<body><div class="feat"></div><div class="big"></div><div class="big"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="med"></div><div class="med"></div><div class="med"></div><div class="med"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div><div class="sml"></div>
1 answers
solution1
1 2017-04-10 19:35:58
If you compare the pattern depicted in the image you provided, verses the code, the dimensions do not match. The ratios are:
Image
-
.sml1x1 -
.med2x2 -
.big3x3
CSS
-
.sml1x1 -
.med1.5x1.5 -
.big2x2
I assume that you wanted what's in the image, so I changed the dimensions according to the ratios shown in the image. I also scaled down everything to 20% (multiply by 5 to original size) for easier viewing of Snippet.
Additional flex-containers* were wrapped around the squares:
-
section.col1 -
section.col2 -
section.col3 -
section.sub2
Body was given display:flex as well. Although in the future I would advise against using body in a limited fashion. Instead of giving body a fixed width, wrap everything in another element instead. Another thing you should consider is not to use fixed dimensions for layout. Try relative units em and/or percentages, as well as a little bit of intrinsic types such as vw and vh . The default browser ratio for px to em is 16:1 (for every 16px = 1em ). In the Snippet, you could make the whole thing responsive by converting the px to em .
.sml {width:2.5em; height:2.5em;....
and replace the body with another element.
main {width:15em....
SNIPPET
* { padding: 0; margin: 0; border: 0; box-sizing: border-box; } body { width: 240px; height: 200px; display: flex; flex-wrap: wrap; } .col1 { width: 80px; height: 200px; display: flex; flex-wrap: wrap; } .col2 { width: 120px; height: 200px; display: flex; flex-wrap: wrap; } .sub2 { display: flex; flex-direction: column; } .col3 { width: 40px; height: 200px; display: flex; flex-direction: column; } .sml { background: url("http://placehold.it/40x40/f00/fff?text=40x40")no-repeat; width: 40px; height: 40px; } .med { background: url("http://placehold.it/80x80/fc0/000?text=80x80")no-repeat; width: 80px; height: 80px; } .big { background: url("http://placehold.it/120x120/000/fc0?text=120x120")no-repeat; width: 120px; height: 120px; } .feat { background: url("http://placehold.it/240x80/00f/000?text=280x80")no-repeat; width: 280px; height: 80px; }
<body> <div class="feat"></div> <section class='col1'> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> <div class="med"></div> <div class="sml"></div> <div class="sml"></div> </section> <section class='col2'> <div class="big"></div> <section class='sub2'> <div class="sml"></div> <div class="sml"></div> </section> <div class="med"></div> </section> <section class='col3'> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> <div class="sml"></div> </section> </body>
* flex containers: A term to refer to an element that has the property display:flex which influences all of it's children elements (called flex items) to adhere to flexbox layout rules.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.