multiple columns layout:

multi-columns properties mostly are used with elements rendering text content in order to render the text in a way similar to newspapers..we all know this.i thought about making some use of these properties to produce a layout-mode since the concept suggests so for text content.the results was a bit interesting!.

below is a multi-columns box that has block-level elements inside it.the box width and height is at it's default value:

above we have:

width and height are at their defaults (unset).
columns:8 auto;
column-gap:0px;
rendered boxes display is at default which is block.(inline and inline-block do not work with this layout-mode)

in order to adjust the space between the colored boxes i ndeed to change the multiple-columns box width (changing the width property value or simply change the browser width) because column-gap has no effect here. notice the flexibility of the small boxes when changing the multi-columns box width to smaller values.hence it is always good to have the containing multi-columns box width value set to it's max value so that the space between the boxes will not emerge again.

notice that column-count value is the same as the number of the rendered elements inside the multi-columns box.this number should always be equal to the number of the rendered elements or it's division number withe zero remainder.otherwise the results will be very unexpected.for example:

if we have 8 boxes rendered then i would use:

  column-count:8;-boxes rendered in one row (8 / 8 = 1)
  column-count: 4;-boxes rendered in two rows (8 / 4 = 2)
  column-coumt:2;-boxes rendered in three rows (8 / 2 = 3)
  column-count:1-boxes rendered in eight rows. (8 / 1 = 8)

so the result is a division by zero remainder number.the same is with odd number of boxes

Specifying height for the multi-columns box:

height value should be high enough to contain the boxes.otherwise the results are unexpected:

height value for the multi-columns containing box above is 70px only

using `column-width`:

using column-width is no different than column-count because column-width tells the browser: hi..give me one column every 200px for example.the same is happening with column-count "give me 2 columns in this multi-columns box.

multiple columns layout:

Specifying height for the multi-columns box:

using column-width:

Empty boxes example using multiple columns concept with block elements:

using `column-width`: