Filling Columns
Depending on the
-ah-column-fill value, the content in an <div> that has multiple columns can either fill the columns sequentially or be balanced, as much as possible, across the columns. When
-ah-column-fill is
balance (default), the columns are balanced as much as possible. When it is
auto, the columns are filled sequentially.
Unless stated otherwise, these samples have orphans: 1;, widows = 1;, and max-height: 7lh + 8pt;
-ah-column-fill
Lorem ipsum dolor sit amet, consectetur adipiscing elit bibendum tincidunt pharetra.
Lorem ipsum dolor sit amet, consectetur adipiscing elit bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu. Ut tincidunt lorem erat, at elementum nibh varius consectetur. Sed viverra metus quis nibh pulvinar, at dignissim nibh adipiscing.
The available content might not fill balanced columns.
Lorem ipsum dolor sit amet, consectetur adipiscing elit bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu.
Content that cannot break, such as a graphic, can affect column heights.
Lorem ipsum dolor sit amet, consectetur adipiscing elit bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit.
-ah-column-fill
'orphans', 'widows', and properties causing keeps or breaks can effect column heights
Lorem ipsum dolor sit amet, consectetur adipiscing elit bibendum tincidunt pharetra.
-ah-column-fill: auto;
Columns are sequentially filled up to the maximum available height.
Lorem ipsum dolor sit amet, consectetur adipiscing elit bibendum tincidunt pharetra.
Lorem ipsum dolor sit amet, consectetur adipiscing elit bibendum tincidunt pharetra.Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit. Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu. Ut tincidunt lorem erat, at elementum nibh varius consectetur. Sed viverra metus quis nibh pulvinar, at dignissim nibh adipiscing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit bibendum tincidunt pharetra. Aenean ultricies molestie ante, sit amet ultricies nunc mollis id. Integer ut porttitor felis, vel tincidunt velit.
Content before a spanning block is balanced.
Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu. Ut tincidunt lorem erat, at elementum nibh varius consectetur.
Lorem Ipsum
Duis volutpat, quam quis aliquet tristique, nulla dui malesuada velit, et consectetur tellus ipsum et arcu. Ut tincidunt lorem erat, at elementum nibh varius consectetur.