Two Columns
Purpose: Responsive two-column layout
Layout: Container with two equal-width columns, stacked on mobile and side-by-side on larger screens
Content: Customizable content for each column
Three Columns
Purpose: Three-column layout
Layout: Responsive container with three equally spaced columns
Content: Empty divs for custom content in each column
Four Columns
Purpose: Responsive grid layout
Layout: Four columns on large screens, two columns on medium screens, and one column on small screens
Content: Empty divs to be filled with desired content
Six Columns
Purpose: Responsive grid layout
Layout: Six columns with equal width, adjusting to screen size
Content: Flexible content within each column (can be images, text, buttons, etc.)
8+4 Columns
Purpose: Responsive two-column layout
Layout: Container with two columns, one taking 8/12 width on large screens and the other taking 4/12 width
Content: Flexible content can be placed within each column
7+5 Columns
Purpose: Responsive two-column layout
Layout: Two columns, first column taking 7/12 width on large screens and second column taking 5/12 width on large screens; both columns take full width on smaller screens
Content: Flexible, can be customized as needed
6+3+3 Columns
Purpose: Responsive grid layout
Layout: Three columns with varying widths depending on screen size
Content: Flexible content for each column
5+7(6+6) Columns - with child columns
Purpose: Responsive multi-column section
Layout: Two main columns on larger screens (5/12 and 7/12 widths), which stack on smaller screens; the second column contains two equal-width sub-columns
Content: Flexible, can include any desired elements in each of the four columns
9(6+6)+3 Columns - with child columns
Purpose: Responsive grid layout
Layout: Three columns with two equal-width columns nested inside the first column
Content: Flexible content area for various elements and components
12/6+6 Columns
Purpose: Responsive container with two columns
Layout: Full-width container with two columns, stacking on smaller screens and side-by-side on larger screens
Content: Flexible content within each column
12/3+3+3 Columns
Purpose: Responsive grid layout
Layout: One row with three equally sized columns on large screens, stacking on smaller screens
Content: Customizable content within each column
12/6+6/12 Columns
Purpose: Responsive container with flexible grid layout
Layout: Two columns on medium and larger screens, stacked on smaller screens
Content: Customizable content within each column
8+4/12/4+8 Columns
Purpose: Responsive multi-column layout
Layout: Five sections with varying column widths, arranged using a flexbox container
Content: Customizable content for each section
7+5/5+7 Columns
Purpose: Responsive grid layout
Layout: Four columns, arranged in a two-row pattern
Content: First row with a larger column on the left and a smaller column on the right; Second row with a smaller column on the left and a larger column on the right
7+space+4 Columns
Purpose: Responsive two-column section
Layout: Two columns with a flexible width, adjusting to the screen size
Content: Customizable content for each column
6+space+5 Columns
Purpose: Two-column section
Layout: Responsive container with two columns, one occupying 6/12 width and the other 5/12 width on large screens
Content: Customizable content for each column
6+space+3 Columns
Purpose: Two-column section
Layout: Container with two columns, one taking half of the width on large screens and the other taking a quarter of the width on large screens
Content: Flexible, can be any content within the two columns
4+space+3+3 Columns
Purpose: Responsive grid layout
Layout: Three columns with varying widths depending on screen size
Content: Customizable content within each column
3+space+4+4 Columns
Purpose: Responsive multi-column layout
Layout: Three columns, with the first one taking full width on small screens and the other two taking half-width on medium screens and one-third width on large screens
Content: Flexible, can be customized as per requirement
4+space+2+2+2 Columns
Purpose: Responsive grid layout
Layout: Four columns with equal width on medium and large screens, full width on small screens
Content: Empty divs for customizable content in each column