CODEWITHSUNDEEP
htmlcss
E.Cross
E.Cross

Reputation: 2137

Grid style layout

I basically want to use css and html to position elements such that they take up whatever space they fit. So I have a grid-like structure, with elements stacked up nicely. The problem is that I can't get the small boxes to fill up beside the large box. e.g. http://jsfiddle.net/9pk4J/1/

HTML:

<section id="cubes">
  <div>
          <article class="large"></article>
        </div>
  <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
        <div>
          <article></article>
        </div>
</section>

CSS:

#cubes {
font-size:0;
position: absolute;
    max-width:670px;
}
#cubes div {
display:inline-block;
padding:3px;
}
#cubes div article.large {
cursor:pointer;
display:inline-block;
height:300px;
width:492px;
background-color:rgba(0,0,0,0.5);
overflow:hidden;
}
#cubes div article {
cursor:pointer;
display:inline-block;
height:150px;
width:160px;
background-color:rgba(0,0,0,0.5);
overflow:hidden;
}

I realize there are methods where I could name specific elements and use absolute positioning to put them in place, but ideally I would like to have them fit vertically and horizontally into place using just css and html.

Upvotes: 3

Views: 566

Answers (3)

andyb
andyb

Reputation: 43823

Well it should be possible with CSS flexible boxes but browser support is not great (IE10+ only for example), although Chrome and Firefox have good support for the model.

Using a CSS flexbox builder, I managed to create a small demo (only tested in Chrome 29) of how the boxes would be rendered but there are plenty of options to customise the output. Still, you might find that they boxes still don't flow correctly, but there's something to play nonetheless.

Sorry the code is a bit cluttered, I lifted it straight out of the builder page!

<div class="visual">
  <div class="box" ng-style="model | vendorPrefix" ng-class="{hover:hoverContainer}" style="-webkit-flex-flow: column wrap; -webkit-justify-content: flex-start; -webkit-align-content: flex-start; -webkit-align-items: flex-start;">
    <div class="ng-scope ng-binding" style="-webkit-order: 1; -webkit-flex: 0 1 auto; -webkit-align-self: auto; min-width: 150px; min-height: 150px;">A</div>
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: auto; min-width: 50px; min-height: 50px;">B</div>
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: auto; min-width: 50px; min-height: 50px;">C</div>
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: baseline; min-width: 50px; min-height: 50px;">D</div>
    <div class="ng-scope ng-binding" style="-webkit-order: 2; -webkit-flex: 0 0 50px; -webkit-align-self: auto; min-width: 50px; min-height: 50px;">E</div>
  </div>
</div>

Upvotes: 0

Luis
Luis

Reputation: 5914

I would recomend using a plug in for that, Masonry it's the name, and you can check its page.

There is a version with Jquery and other one with only CSS ('vanilla version')

Here is a live demo with your previous fiddle http://jsfiddle.net/9pk4J/5/

html Markup

<section id="cubes">
    <div class="box">
        <article class="large"></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
    <div class="box">
        <article></article>
    </div>
</section>

js Markup

$('#cubes').masonry({
    itemSelector: '.box',
    columnWidth: 100,
    isAnimated: true
});

Jquery Masonry

Vanilla Masonry

Hope it helps!

Upvotes: 1

Tim Wasson
Tim Wasson

Reputation: 3656

I agree with @Luis that Masonry is probably a better bet, but if you can fix the width and the sizes of the boxes, you can accomplish this with straight CSS. If you're always going to have 1 large box first, then several small ones, just float:left on all your divs and you're good to go. Shown here:

http://jsfiddle.net/9pk4J/2/

Upvotes: 1

Related Questions