{"id":4386,"date":"2024-04-15T02:21:52","date_gmt":"2024-04-14T18:21:52","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4386"},"modified":"2024-04-15T02:21:52","modified_gmt":"2024-04-14T18:21:52","slug":"swift-stack","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/swift-stack\/","title":{"rendered":"Swift Stack"},"content":{"rendered":"\n
\n

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 \u2014 from prominent sections to displays of products.<\/p>\n

Throughout this tutorial, you will grasp:<\/p>\n

    \n
  1. Ways to incorporate a Swift Stack<\/li>\n
  2. Methods to design a Swift Stack<\/li>\n
  3. Approaches to style a Swift Stack cell<\/li>\n<\/ol>\n

    Methods to incorporate a Swift Stack<\/h2>\n

    You can introduce a Swift Stack through the Add panel<\/strong> > Structure<\/strong> 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.<\/p>\n

    Swift Stack variations<\/h3>\n

    The Swift Stack provides 8 pre-set variations, each featuring distinctive cell structures:<\/p>\n

      \n
    • Single column \u2014<\/strong> 1 cell, spanning 1 column and 1 row\u00a0<\/li>\n
    • Double columns<\/strong>\u2014<\/strong> 2 cells, each spanning 1 column and 1 row<\/li>\n
    • Triple columns<\/strong>\u2014<\/strong> 3 cells, each spanning 1 column and 1 row<\/li>\n
    • Quadruple columns<\/strong>\u2014<\/strong> 4 cells, each spanning 1 column and 1 row\u00a0<\/li>\n
    • 2 + 1<\/strong>\u2014<\/strong> 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<\/li>\n
    • 1 + 2<\/strong>\u2014<\/strong> 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<\/li>\n
    • Double 2 x 2<\/strong>\u2014<\/strong> 4 cells.\u00a0 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<\/li>\n
    • Formatted Double 2 x 2 \u2014<\/strong> 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<\/li>\n<\/ul>\n

      Each Swift Stack variation serves different purposes. For example, you could utilize a double column variation for a prominent section \u2014 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.<\/p>\n

      \n
      \"The<\/div>\n<\/figure>\n

      Approaches to design a Swift Stack<\/h2>\n

      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.<\/p>\n

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

        Ways to include or remove rows or columns in a Swift Stack<\/h3>\n

        There are 4 locations where you can introduce or remove rows or columns in a Swift Stack:<\/p>\n

          \n
        • Within the on-canvas menu<\/li>\n
        • In the Style panel<\/li>\n
        • Within Edit mode<\/li>\n
        • Inside the Swift Stack<\/li>\n<\/ul>\n

          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.<\/p>\n

          NB:<\/strong> When introducing a row or column to your Swift Stack, the quantity of cells added corresponds to the tally of rows and columns \u2014 not<\/em> the number of cells \u2014 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.<\/h6>\n

          Eliminating rows or columns will also clear the content inside the row\/column cells.<\/p>\n

          Append a row or column to a Swift Stack in the on-canvas menu<\/h4>\n

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

          Include or eliminate a row or column in a Swift Stack in the Style panel<\/h4>\n

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

          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.<\/p>\n

          Add or clear a row or column in a Swift Stack within Edit mode<\/h4>\n

          You can append or discard rows or columns in Edit mode<\/strong> on the canvas. Select the Swift Stack element and tap Edit Swift Stack<\/strong> 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 <\/strong>or Delete row<\/strong> in the on-canvas menu.<\/p>\n

          To exit Edit mode<\/strong>, hit Esc<\/strong> or press Done<\/strong> on the canvas.<\/p>\n

          Integrate a row or column to a Swift Stack inside the Swift Stack<\/h4>\n

          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.<\/p>\n

          Approaches to customize spacing between cells in a Swift Stack<\/h3>\n

          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.<\/p>\n

          To regulate this gap, navigate to the Style panel<\/strong> > Layout <\/strong>> Gap<\/strong>. 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.<\/p>\n

          symbol and alter the spacing value(s) as necessary.<\/p>\n

          You can also modify the distance between cells by accessing Edit mode<\/strong>, hovering over the space between 2 cells, and then clicking and dragging to increase or reduce the gap. If the \u201clock<\/strong>\u201d symbol is secured in the Style panel<\/strong> > Layout <\/strong>> Gap<\/strong>, both the row and column gap values will adapt to the same value while dragging. If the \u201clock<\/strong>\u201d symbol is unlocked, you\u2019ll only adjust the gap that you\u2019re currently clicking and dragging (i.e., either the row or<\/em> column gap value).<\/p>\n

          Guidelines for customizing the appearance of a Quick Stack<\/h3>\n

          You can customize a Quick Stack\u2019s appearance by choosing the Quick Stack and navigating to Style panel<\/strong> > Layout <\/strong>> \u00a0Display<\/strong>. Here, you can opt to Present<\/strong> or Conceal <\/strong>the Quick Stack:<\/p>\n

            \n
          • Present \u2014 <\/strong>Show the Quick Stack<\/li>\n
          • Conceal \u2014 <\/strong>Hide the Quick Stack<\/li>\n<\/ul>\n

            If a hidden Quick Stack needs to be selected, you can locate it in the Navigator.<\/p>\n

            Techniques for styling row and column dimensions<\/h3>\n

            By default, each column\u2019s 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.<\/p>\n

            To modify the FR dimensions or the min\/max dimensions, go to Edit mode<\/strong>, select the row\u2019s header or column\u2019s 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<\/strong>. Beyond Edit mode, dimension adjustments can be made by selecting a cell and dragging the resize handle found on the cell boundary.<\/p>\n

            Steps for styling a Quick Stack on various breakpoints<\/h3>\n
            \n