Swift Stack

The Swift Stack component offers a framework for straightforward to intricate, adaptable designs. It employs the grid display property and encompasses cells constructed of divs, which are automatically set to flex. This component consists of 8 variations, enabling you to position content in diverse layouts. Additionally, you have the option to manually modify each Swift Stack variation and Swift Stack cell dimensions to attain more precise control over the presentation of your content. Swift Stack is versatile and valuable for organizing various types of content — from prominent sections to displays of products.

Throughout this tutorial, you will grasp:

1. Ways to incorporate a Swift Stack
2. Methods to design a Swift Stack
3. Approaches to style a Swift Stack cell

Methods to incorporate a Swift Stack

You can introduce a Swift Stack through the Add panel > Structure area. Drag and drop the Swift Stack onto the Webflow canvas. A menu of presets will appear on the canvas, allowing you to select one of the 8 Swift Stack variations.

Swift Stack variations

The Swift Stack provides 8 pre-set variations, each featuring distinctive cell structures:

• Single column — 1 cell, spanning 1 column and 1 row 
• Double columns— 2 cells, each spanning 1 column and 1 row
• Triple columns— 3 cells, each spanning 1 column and 1 row
• Quadruple columns— 4 cells, each spanning 1 column and 1 row 
• 2 + 1— 3 cells. 2 cells in the left column each spanning 1 column and 1 row. 1 cell in the right column, spanning 1 column and 2 rows
• 1 + 2— 3 cells. 1 cell in the left column, spanning 1 column and 2 rows. 2 cells in the right column each spanning 1 column and 1 row
• Double 2 x 2— 4 cells.  2 cells in the left column, each spanning 1 column and 1 row. 2 cells in the right column, each spanning 1 column and 1 row
• Formatted Double 2 x 2 — 4 cells. 2 cells in the top row, with the left cell spanning 2 columns and 1 row, the right cell spanning 1 column and 1 row. 2 cells in the bottom row, with the left cell spanning 1 column and 1 row, the right cell spanning 2 columns and 1 row

Each Swift Stack variation serves different purposes. For example, you could utilize a double column variation for a prominent section — positioning textual content in the right column and an image in the left. Alternatively, you may opt for a Double 2 x 2 variation to craft a responsive exhibition of product visuals.

Approaches to design a Swift Stack

You have the flexibility to tailor your Swift Stack’s grid layout, spacing between cells, and presentation. By default, Swift Stacks come with 20px of margin between each cell and the parent element of the Swift Stack.

• Procedures to incorporate or eliminate rows or columns in a Swift Stack
• Methods to customize spacing between cells in a Swift Stack
• Ways to adjust the display of a Swift Stack
• Methods to regulate row and column dimensions
• Procedures to style a Swift Stack across different breakpoints

Ways to include or remove rows or columns in a Swift Stack

There are 4 locations where you can introduce or remove rows or columns in a Swift Stack:

• Within the on-canvas menu
• In the Style panel
• Within Edit mode
• Inside the Swift Stack

Upon adding a row or column to your Swift Stack, the count of cells will align with the number of existing rows and/or columns. For instance, if your Swift Stack comprises 2 rows and 1 column of cells and you append a new column, 2 cells will be added to the right of the existing cells, forming their separate column.

NB: When introducing a row or column to your Swift Stack, the quantity of cells added corresponds to the tally of rows and columns — not the number of cells — presently present. For instance, if you possess a Swift Stack containing 2 cells in 1 row, with one cell spanning 2 columns and the other spanning 1 column, the addition of another row will result in the inclusion of 3 cells to the Swift Stack.

Eliminating rows or columns will also clear the content inside the row/column cells.

Append a row or column to a Swift Stack in the on-canvas menu

You can introduce rows or columns by right-clicking on the Swift Stack, hovering over either Add column or Add row, and selecting the position to include the column or row (e.g., left, right, above, or below).

Include or eliminate a row or column in a Swift Stack in the Style panel

You can incorporate or exclude rows or columns by choosing the Swift Stack and navigating to Style panel > Layout > Grid. Subsequently, you can insert or delete columns and rows from the Swift Stack by clicking the “lock” and “unlock” icons.

Upon removing a row from a Swift Stack, the cell(s) in the lowest row will be eliminated from the Swift Stack. When removing a column from a Swift Stack, the cell(s) in the rightmost column will be eliminated from the Swift Stack.

Add or clear a row or column in a Swift Stack within Edit mode

You can append or discard rows or columns in Edit mode on the canvas. Select the Swift Stack element and tap Edit Swift Stack at the top right corner of the Swift Stack to initiate Edit mode. To introduce fresh rows and columns, click the “+” symbol adjacent to the top right or bottom left cells. Rows and columns can be removed by tapping the cell header, then selecting Delete column or Delete row in the on-canvas menu.

To exit Edit mode, hit Esc or press Done on the canvas.

Integrate a row or column to a Swift Stack inside the Swift Stack

You can inject rows or columns directly within the Swift Stack on the canvas. To add rows or columns, choose a Swift Stack cell, hover over the “blue dot” to the top, bottom, left, or right of the cell, and tap the “+” symbol.

Approaches to customize spacing between cells in a Swift Stack

You have the capability to increase or decrease the margin (i.e., the external space of an element) between cells in your Swift Stack. With an initial 20px gap between each cell, you can modify this spacing.

To regulate this gap, navigate to the Style panel > Layout > Gap. When the “lock” icon is engaged, the gap value will be uniform for column and row cells. For distinct gap sizes in column and row cells, unlock the “lock” icon and customize the values for each.

symbol and alter the spacing value(s) as necessary.

You can also modify the distance between cells by accessing Edit mode, hovering over the space between 2 cells, and then clicking and dragging to increase or reduce the gap. If the “lock” symbol is secured in the Style panel > Layout > Gap, both the row and column gap values will adapt to the same value while dragging. If the “lock” symbol is unlocked, you’ll only adjust the gap that you’re currently clicking and dragging (i.e., either the row or column gap value).

Guidelines for customizing the appearance of a Quick Stack

You can customize a Quick Stack’s appearance by choosing the Quick Stack and navigating to Style panel > Layout >  Display. Here, you can opt to Present or Conceal the Quick Stack:

• Present — Show the Quick Stack
• Conceal — Hide the Quick Stack

If a hidden Quick Stack needs to be selected, you can locate it in the Navigator.

Techniques for styling row and column dimensions

By default, each column’s dimension is set to 1 fractional unit (FR). The dimension of each row is configured to auto, adjusting the size based on the contained content.

To modify the FR dimensions or the min/max dimensions, go to Edit mode, select the row’s header or column’s header, and adjust the dimensions in the on-canvas menu. You can also fine-tune dimensions by clicking and dragging the edge of each row or column header in Edit mode. Beyond Edit mode, dimension adjustments can be made by selecting a cell and dragging the resize handle found on the cell boundary.

Steps for styling a Quick Stack on various breakpoints

When selecting the Quick Stack element and switching breakpoints — from the default desktop breakpoint — the rows parameter in the Style panel > Layout > Grid appears grayed out and introduces a new “Auto” value. Webflow will automatically populate the row value — based on the column value already in place — to suit the number of cells within your Quick Stack.

At times, the Quick Stack’s display and grid styles exhibit pink cues in the Style panel > Layout — indicating that these styles pertain solely to the selected element on the current breakpoint.

Techniques for styling a Quick Stack cell

Beyond the desktop breakpoint, you have the ability to style a Quick Stack’s cell by selecting a cell on the canvas and visiting Style panel > Cell size. You can adjust the cell to span 1 or multiple rows and columns in size. Additionally, you can alter the sequence of cells. Concerning sequence, you can position a cell as first, last, or establish a custom order by accessing the “three disclosure dots” and entering a value within the sequence field. Note that to set a custom order value on a cell, you must allocate order values greater than 0 to all other cells within your Quick Stack.

When working with the desktop breakpoint, you can manage cell sizes by merging and unmerging cells.

At times, the cell’s size and sequence styles display pink indications in Style panel > Cell size — indicating that these styles apply exclusively to the selected cell on the current breakpoint.

Note: Quick Stack cells utilize flexbox by default.

Approaches to adjusting Quick Stack cell spacing

You can incorporate padding but not margin to a Quick Stack cell. If you desire to introduce spacing between cells and the parent Quick Stack element, you can configure the Quick Stack’s gap between cells.

Method for merging Quick Stack cells

You can merge a Quick Stack cell with cells located to its left, right, above, or below. It is important to note that upon merging cells, the content within the cell being merged into will be eliminated.

There are 2 methods to merge Quick Stack cells:

• Via the on-canvas menu— right-click on the cell you wish to merge, hover over Merge cell in the on-canvas menu, and select the direction for merging the cell (i.e., above, below, right, left)
• Utilizing on-canvas controls  — pick the cell to merge, hover over the blue dot adjacent to the cell’s right, left, above, or below (depending on the intended merge direction), and then click the Merge cell icon

Note: Merging a cell is only feasible if it is of equal or superior size compared to the cell(s) it is being merged with.

Procedure for unmerging Quick Stack cells

There are 2 approaches to unmerge Quick Stack cells:

• Via the on-canvas menu— right-click on the cell you wish to unmerge and select Unmerge cells in the on-canvas menu
• Through the Style panel — pick the cell for unmerging, navigate to Style panel > Cell size, and click on Unmerge cells

Note: Upon unmerging cells, the content of the original cell you merged into will not be reinstated.