Balanced Alternating Column Layout in CSS3

balanced alternating column layout in CSS3

I would say this is not possible without JS. Here is a fiddle I made based on an article from Ben Holland. At least to me looks like what you are after.

http://jsfiddle.net/QWsBJ/2/

HTML:

<body onload="setupBlocks();">
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
</body>

CSS:

.block {
  position: absolute;
  background: #eee;
  padding: 20px;
  width: 300px;
  border: 1px solid #ddd;
}

JS:

var colCount = 0;
var colWidth = 0;
var margin = 20;
var blocks = [];

$(function(){
    $(window).resize(setupBlocks);
});

function setupBlocks() {
    colWidth = $('.block').outerWidth();
    colCount = 2
    for(var i=0;i<colCount;i++){
        blocks.push(margin);
    }
    positionBlocks();
}

function positionBlocks() {
    $('.block').each(function(){
        var min = Array.min(blocks);
        var index = $.inArray(min, blocks);
        var leftPos = margin+(index*(colWidth+margin));
        $(this).css({
            'left':leftPos+'px',
            'top':min+'px'
        });
        blocks[index] = min+$(this).outerHeight()+margin;
    }); 
}

Array.min = function(array) {
    return Math.min.apply(Math, array);
};

Balance objects over two columns using CSS column-count: 2 in Chrome

Turns out that in Chrome CSS properties "orphans" and "widows" are set to a value of 2 by default, whereas other browsers seem to maintain a value of 1.

In order to fix the issue I described, the following CSS properties on #columncontainer should be added:

orphans: 1
widows: 1

This will prevent Chrome from trying to stick to one column.

For further reference:

https://bugs.chromium.org/p/chromium/issues/detail?id=638530
https://drafts.csswg.org/css-break/#widows-orphans
https://drafts.csswg.org/css-break/#unforced-breaks

Excerpt of drafts.csswg.org:

If a block contains fewer lines than the value of widows or orphans, the rule simply becomes that all lines in the block must be kept together.

Coloring every other row using CSS Grid

You are defining a fixed height for each row so you can easily consider a repeated gradient:

.wrapper {  border-style: solid;  border-color: rgb(230, 230, 230);  font-weight: bold;  text-align: center;  display: grid;  grid-template-columns: repeat(6, 1fr);  grid-template-rows: repeat(18, 35px);  background:    repeating-linear-gradient(#ddd 0 35px,transparent 35px 70px);}

<div class="container">  <div class="wrapper">    <div>Month</div>    <div>Overtime Hours</div>    <div>Compensation Hours</div>    <div>Vacation</div>    <div>Personal Hours</div>    <div>Sick Hours</div>
    <div>Carry Over</div>    <div>0.00</div>    <div>-</div>    <div>35.00</div>    <div>-</div>    <div>-</div>

    <div>Allotted</div>    <div>-</div>    <div>-</div>    <div>140.00</div>    <div>14.00</div>    <div>-</div>
    <div>Starting Total</div>    <div>0.00</div>    <div>-</div>    <div>175.00</div>    <div>14.00</div>    <div>-</div>
    <div>Jan</div>    <div>-</div>    <div>-</div>    <div>-</div>    <div>2.00</div>    <div>7.00</div>

    <div>Feb</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>-</div>    <div>-</div>
    <div>March</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>April</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>May</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>Jun</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>Jul</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>Aug</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>Sep</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>Oct</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>Nov</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>Dec</div>    <div>-</div>    <div>-</div>    <div>7.00</div>    <div>2.00</div>    <div>3.50</div>
    <div>Yearly Total</div>    <div>0.00</div>    <div>0.00</div>    <div>150.50</div>    <div>10.50</div>    <div>28.00</div>
    <div>Balance in Hours</div>    <div></div>    <div>0.00</div>    <div>24.50</div>    <div>3.50</div>    <div></div>
    <div>Balance in Days</div>    <div></div>    <div>0.00</div>    <div>3.50</div>    <div>0.50</div>    <div></div>  </div></div>

Balance grid column width within container, based on content

It sounds like you are looking for a two column, fixed width grid where column widths are proportional to the text content they contain (and overflowing text content is truncated). I think the below gets you closer, but you will run into some issues once the combined text content exceeds the width of the grid. The grid columns will not continue to resize proportionally once the combined text content exceeds the width of the grid. Also, if you actually plan to use contenteditable elements in your grid, the combination of overflow: hidden and text-overflow: ellipsis will cause some browsers to stop displaying your input once the text begins to overflow (which means that if you enter enough characters, the column will eventually appear empty).

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  width: 300px;
}

.column {
  border: 1px solid gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="grid">
  <div class="column" contenteditable="true">
    abcdefghijklmnop
  </div>
  <div class="column" contenteditable="true">
    abcdefghijklmnopqrstuvwxyz
  </div>
</div>

Balanced Alternating Column Layout in CSS3