CSSkel uses CSS Grid to provide a flexible and responsive grid system. The main classes are .grid-container and .columns, which can be customized with various utility classes.
Use .grid-container or .columns to create a grid layout. By default, it uses a single column on mobile and switches to three columns at 600px and above.
<div class="grid-container">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>Use .cols:x (where x is 2 to 12) to specify the number of columns. For example, .cols:5 creates a five-column grid.
<div class="grid-container cols:5">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
</div>Use .softcols:x instead of .cols:x to allow columns to adapt their width based on content, rather than enforcing strict equal widths.
Use .colspan:x (where x is 2 to 9) to make an element span multiple columns. The maximum span depends on the screen size (up to 5 columns at 600px, up to 9 at 1200px).
<div class="grid-container cols:6">
<div class="colspan:3">Spans 3 columns</div>
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>Use .rowspan:x (where x is 2 to 12) to make an element span multiple rows.
<div class="grid-container cols:5" style="height: 40vh">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
<div class="colspan:5 rowspan:3">Spans 5 columns and 3 rows</div>
<div>Column 6</div>
<div>Column 7</div>
<div>Column 8</div>
<div>Column 9</div>
</div>Use .autocols to create a grid with automatic column fitting, adjusting to the container width. Optionally, use .maxcols:x (where x is 1 to 10) to limit the maximum number of columns.
<div class="autocols maxcols:4">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
<div>Column 6</div>
</div>