Smart-Align Framework

Enter the realm of Smart-Align, where shape and form seamlessly unite, creating a harmonious web layout experience.


Smart-Align, a feature of zenCSS, leverages a custom Flexbox grid layout, offering a sophisticated and adaptable framework for your websites and applications. It comprises three integral elements:


These are the foundational blocks of the Smart-Align grid. They act as responsive, nestable shells that form the backbone of your layout.


Within containers, rows are the structural units that host columns. They play a pivotal role in organizing and aligning your content.


Nested inside rows, columns are the dynamic elements of this system. They offer versatility in display across different devices, embracing fluidity, feature-rich layouts, and often marrying form and function.

Smart-Align in Action

Smart-Align is intuitively designed to cater to various devices. The default setting places four columns on a desktop view, two on a tablet, and one on mobile. This fluid system allows for customization, adapting seamlessly to any column configuration. Experiment with adding or removing columns and observe the auto-reflow of content.

column 1 column 2 column 3 column 4

Advanced Customization

Use container-fluid for a full width layout. Containers can be nested inside a fluid container.

Use the "x-up" prefix in modifier classes for altering default alignments, with 'x' ranging from two to eight. For instance, applying 'eight-up' to a row changes its structure. The .mobile:two-up class is specifically for mobile devices, enabling a two-column view on smaller screens.

1 2 3 4 5 6 7 8

For rows with 2 or 3 columns, the "feature" option allows columns to occupy more space, making them stand out. Additional size modifiers like -sm, -md,, -lg and -xl offer further emphasis options.

col col feature-lg feature-md col feature-xl col feature-lg col feature-md col feature-sm col feature col col col col feature col feature-sm col feature-md col feature-lg

Code Examples

Here, we'll provide detailed examples of semantic HTML and zenCSS's unique syntax, demonstrating the practical implementation of the Smart-Align System.


<div class="z-container">
  <div class="z-row">
    <div class="z-col">


What is zentax?