Column layout

Useful for representing columns layouts like in old newspapers

 .cols

Aditionally it defines a max column width making it automatically responsive no matter the ammout of columns

Requirements:

None

Modifiers:

Column count

Columns range goes from 2 to 12, 2 is the default.

 .cols.--count-2

Unions:

None

Example

njk
{% extends "columns.njk" %}
html compiled
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
<div class="flx --flxColumn">
  <div class="txt --txtAlignFlex-start">
     <h4>Displaying two columns</h4>

    <p>just <b class="--txtColor-secondary --txtStyle">.cols</b>
or <b class="--txtColor-secondary --txtStyle">.cols.--count</b>
or <b class="--txtColor-secondary --txtStyle">.cols.--count-2</b>

    </p>
  </div>
  <div class="cols --width"> <a href="#" class="avatarAureo --size-lg">
               <img src="https://picsum.photos/seed/aguacate/400/300" alt="Random" loading="lazy"></a>
 <a href="#" class="avatarAureo --size-lg">
               <img src="https://picsum.photos/seed/cereza/400/300" alt="Random" loading="lazy"></a>

  </div>
  <div class="txt --txtAlignFlex-start">
     <h4>Displaying three columns</h4>

    <p> <b class="--txtColor-secondary --txtStyle">.cols.--count-3</b>

    </p>
  </div>
  <div class="cols --count-3 --width"> <a href="#" class="avatarAureo --size-lg">
                  <img src="https://picsum.photos/seed/aguacate/400/300" alt="Random" loading="lazy"></a>
 <a href="#" class="avatarAureo --size-lg">
                  <img src="https://picsum.photos/seed/cereza/400/300" alt="Random" loading="lazy"></a>
 <a href="#" class="avatarAureo --size-lg">
                  <img src="https://picsum.photos/seed/platano/400/300" alt="Random" loading="lazy"></a>

  </div>
</div>