{"id":2033,"date":"2026-10-14T04:30:07","date_gmt":"2026-10-14T04:30:07","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2033"},"modified":"2026-10-15T03:16:20","modified_gmt":"2026-10-15T03:16:20","password":"","slug":"column","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/column\/","title":{"rendered":"Column"},"content":{"rendered":"\n

The Column Block<\/strong> lets you organize content inside a Row Block. You can add text, images, buttons, headings, and other Gutenberg blocks inside a column. You can also place another Row Block inside a column to create nested layouts.<\/p>\n\n\n\n

Use the Column Block to build multi-column layouts and control the width, alignment, spacing, background, and border of individual columns.<\/p>\n\n\n\n

How to Add a Column Block<\/h2>\n\n\n\n

Follow these steps to add and configure the Column Block in the Gutenberg editor.<\/p>\n\n\n\n

Step 1: Add the Column Block<\/h3>\n\n\n\n
    \n
  1. Open a page or post in the WordPress Gutenberg editor.<\/li>\n\n\n\n
  2. Insert a ShapeBlock Row Block.<\/li>\n\n\n\n
  3. Select a column inside the row, or add a column if needed.<\/li>\n\n\n\n
  4. Add your desired Gutenberg blocks inside the column.<\/li>\n\n\n\n
  5. Select the column to access its settings in the block sidebar.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Step 2: Configure the Column Block<\/h3>\n\n\n\n

    Select the Column Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n

      \n
    • Settings:<\/strong> Configure the HTML tag, custom CSS class, responsive visibility.<\/li>\n\n\n\n
    • Layout:<\/strong> Configure Column width, Alignment & Size, Flexbox alignment and other layout options.<\/li>\n\n\n\n
    • Style:<\/strong> Customize spacing, background, border, border radius, and box shadow.<\/li>\n\n\n\n
    • Advanced:<\/strong> Configure additional spacing and background settings for the block.<\/li>\n<\/ul>\n\n\n\n

      Settings Tab<\/h2>\n\n\n\n

      The Settings tab contains the General<\/strong> and Responsive<\/strong> panels. Use these settings to configure the column’s HTML tag, custom CSS class, and device visibility.<\/p>\n\n\n\n

      1. General<\/h3>\n\n\n\n

      The General panel contains the following settings:<\/p>\n\n\n\n

      HTML Tag<\/h4>\n\n\n\n

      Choose the HTML element used to wrap the column’s content.<\/p>\n\n\n\n

      Available options:<\/p>\n\n\n\n

        \n
      • div<\/code><\/li>\n\n\n\n
      • section<\/code><\/li>\n\n\n\n
      • article<\/code><\/li>\n\n\n\n
      • aside<\/code><\/li>\n<\/ul>\n\n\n\n

        Choose a tag that matches the purpose of the content. For example, use section<\/code> for a meaningful content section or aside<\/code> for supplementary content.<\/p>\n\n\n\n

        Custom CSS Class<\/h4>\n\n\n\n

        Enter a custom CSS class to target the column with your own CSS. This is useful when you want to apply additional styling that is not available through the block controls.<\/p>\n\n\n\n

        3. Responsive<\/h3>\n\n\n\n

        Control the visibility of the Row Block on different device types.<\/p>\n\n\n\n

          \n
        • Hide on Desktop:<\/strong> Hides the row on desktop devices.<\/li>\n\n\n\n
        • Hide on Tablet:<\/strong> Hides the row on tablet devices.<\/li>\n\n\n\n
        • Hide on Mobile:<\/strong> Hides the row on mobile devices.<\/li>\n<\/ul>\n\n\n\n

          Enable the appropriate option to hide the row on the selected device type.<\/p>\n\n\n\n

          <\/p>\n\n\n\n

          Layout Tab<\/h2>\n\n\n\n

          The Layout tab contains the Width<\/strong>, Alignment & Size<\/strong>, and Flexbox<\/strong> panels. These settings control the column’s dimensions and how its content is arranged.<\/p>\n\n\n\n

          1. Width<\/h3>\n\n\n\n

          Use the Width panel to control how much space the column occupies inside its parent Row Block.<\/p>\n\n\n\n

          Width Type<\/strong><\/p>\n\n\n\n

          Choose one of the following width calculation methods:<\/p>\n\n\n\n

            \n
          • Percentage:<\/strong> Set the column width using a percentage-based value.<\/li>\n\n\n\n
          • Flex:<\/strong> Let the column grow according to its flex settings.<\/li>\n\n\n\n
          • Custom:<\/strong> Set a specific width using a supported unit.<\/li>\n<\/ul>\n\n\n\n

            Width<\/strong><\/p>\n\n\n\n

            Available when Percentage<\/strong> or Custom<\/strong> is selected. Set the column width using the available units:<\/p>\n\n\n\n

              \n
            • %<\/code><\/li>\n\n\n\n
            • px<\/code><\/li>\n\n\n\n
            • rem<\/code><\/li>\n\n\n\n
            • vw<\/code><\/li>\n<\/ul>\n\n\n\n

              The width can be configured separately for desktop, tablet, and mobile devices.<\/p>\n\n\n\n

              Flex Grow<\/strong>:<\/p>\n\n\n\n

              Available when Flex<\/strong> is selected. Controls how much the column can grow relative to other flex items. The available value range is 0\u201320<\/code>.<\/p>\n\n\n\n

              A higher value allows the column to take a larger share of the available space compared with columns having lower grow values.<\/p>\n\n\n\n

              Flex Basis<\/strong>:<\/p>\n\n\n\n

              Available when Flex<\/strong> is selected. Sets the initial size of the column before the flex layout distributes available space.<\/p>\n\n\n\n

              Flex Grow and Flex Basis also support device-specific values.<\/p>\n\n\n\n

              <\/p>\n\n\n\n

              2. Alignment & Size<\/h3>\n\n\n\n

              This panel controls the column’s vertical alignment within its parent row and its minimum height.<\/p>\n\n\n\n

              Vertical Align (Self)<\/strong><\/p>\n\n\n\n

              Choose how the column aligns along the vertical axis:<\/p>\n\n\n\n

                \n
              • Default:<\/strong> Use the default alignment behavior.<\/li>\n\n\n\n
              • Top:<\/strong> Align the column to the top.<\/li>\n\n\n\n
              • Middle:<\/strong> Align the column to the middle.<\/li>\n\n\n\n
              • Bottom:<\/strong> Align the column to the bottom.<\/li>\n\n\n\n
              • Stretch:<\/strong> Stretch the column along the available cross-axis space.<\/li>\n<\/ul>\n\n\n\n

                This is useful when columns contain different amounts of content and need consistent alignment.<\/p>\n\n\n\n

                Min Height<\/strong><\/p>\n\n\n\n

                Set the minimum height of the column. This helps maintain a consistent column height even when the content inside different columns varies.<\/p>\n\n\n\n

                The minimum height can be configured separately for desktop, tablet, and mobile devices.<\/p>\n\n\n\n

                <\/p>\n\n\n\n

                3. Flexbox<\/h3>\n\n\n\n

                The Flexbox panel controls the arrangement, alignment, wrapping, and spacing of content inside the column.<\/p>\n\n\n\n

                Direction<\/strong><\/p>\n\n\n\n

                Choose the direction in which the column’s inner content is arranged:<\/p>\n\n\n\n

                  \n
                • Row:<\/strong> Arrange items horizontally.<\/li>\n\n\n\n
                • Row reverse:<\/strong> Arrange items horizontally in reverse order.<\/li>\n\n\n\n
                • Column:<\/strong> Arrange items vertically.<\/li>\n\n\n\n
                • Column reverse:<\/strong> Arrange items vertically in reverse order.<\/li>\n<\/ul>\n\n\n\n

                  Justify Content<\/strong><\/p>\n\n\n\n

                  Controls how items are distributed along the main axis.<\/p>\n\n\n\n

                  Available options:<\/p>\n\n\n\n

                    \n
                  • Start:<\/strong> Place items at the beginning.<\/li>\n\n\n\n
                  • Center:<\/strong> Place items in the center.<\/li>\n\n\n\n
                  • End:<\/strong> Place items at the end.<\/li>\n\n\n\n
                  • Space between:<\/strong> Distribute items with space between them.<\/li>\n\n\n\n
                  • Space around:<\/strong> Distribute space around each item.<\/li>\n\n\n\n
                  • Space evenly:<\/strong> Distribute equal space between items and at both ends.<\/li>\n<\/ul>\n\n\n\n

                    Align Items<\/strong><\/p>\n\n\n\n

                    Controls how individual items align along the cross axis.<\/p>\n\n\n\n

                    Available options:<\/p>\n\n\n\n

                      \n
                    • Stretch:<\/strong> Stretch items across the available cross-axis space.<\/li>\n\n\n\n
                    • Top:<\/strong> Align items to the top.<\/li>\n\n\n\n
                    • Middle:<\/strong> Align items to the middle.<\/li>\n\n\n\n
                    • Bottom:<\/strong> Align items to the bottom.<\/li>\n\n\n\n
                    • Baseline:<\/strong> Align items according to their text baselines.<\/li>\n<\/ul>\n\n\n\n

                      Align Content<\/strong><\/p>\n\n\n\n

                      Controls how multiple lines or groups of items are aligned when the layout has extra cross-axis space.<\/p>\n\n\n\n

                      Available options:<\/p>\n\n\n\n

                        \n
                      • Stretch<\/strong><\/li>\n\n\n\n
                      • Top<\/strong><\/li>\n\n\n\n
                      • Middle<\/strong><\/li>\n\n\n\n
                      • Bottom<\/strong><\/li>\n\n\n\n
                      • Space between<\/strong><\/li>\n\n\n\n
                      • Space around<\/strong><\/li>\n<\/ul>\n\n\n\n

                        This setting is most useful when the content wraps onto multiple lines.<\/p>\n\n\n\n

                        Wrap<\/strong><\/p>\n\n\n\n

                        Choose how items behave when they do not fit on one line:<\/p>\n\n\n\n

                          \n
                        • No wrap:<\/strong> Keep items on a single line.<\/li>\n\n\n\n
                        • Wrap:<\/strong> Allow items to move onto additional lines.<\/li>\n\n\n\n
                        • Wrap reverse:<\/strong> Wrap items in reverse cross-axis order.<\/li>\n<\/ul>\n\n\n\n

                          Gap<\/strong><\/p>\n\n\n\n

                          Set the space between items inside the column. Use this to create consistent spacing between headings, paragraphs, images, buttons, and other inner blocks.<\/p>\n\n\n\n

                          Direction, Justify Content, Align Items, Align Content, Wrap, and Gap support separate settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n

                          \"\"<\/figure>\n\n\n\n

                          Style Tab<\/h2>\n\n\n\n

                          The Style tab contains the Spacing<\/strong>, Background<\/strong>, and Border<\/strong> panels. Use these controls to customize the column’s appearance and spacing.<\/p>\n\n\n\n

                          1. Spacing<\/h3>\n\n\n\n

                          The Spacing panel contains two controls: Padding and Margin.<\/p>\n\n\n\n

                            \n
                          • Padding<\/strong>: Controls the space inside the column, between its edges and its content. Increase the padding when text, images, or buttons need more room around them.<\/li>\n\n\n\n
                          • Margin<\/strong>: Controls the space outside the column. Use it to create separation between the column and surrounding elements.<\/li>\n<\/ul>\n\n\n\n

                            Both Padding and Margin support responsive values for desktop, tablet, and mobile devices.<\/p>\n\n\n\n

                            <\/p>\n\n\n\n

                            2. Background<\/h3>\n\n\n\n

                            Use the Background panel to customize the column’s background.<\/p>\n\n\n\n

                              \n
                            • Background Color<\/strong>: Choose a background color for the column to distinguish it from surrounding content.<\/li>\n\n\n\n
                            • Background Gradient<\/strong>: Apply a gradient background to create a transition between colors.<\/li>\n<\/ul>\n\n\n\n

                              Choose the background that best matches your page design and improves the visual separation of the column’s content.<\/p>\n\n\n\n

                              <\/p>\n\n\n\n

                              3. Border<\/h3>\n\n\n\n

                              The Border panel contains controls for the column’s border, corner radius, and shadow.<\/p>\n\n\n\n

                                \n
                              • Border:<\/strong> Customize the column’s border using the available Border controls.<\/li>\n\n\n\n
                              • Border Radius:<\/strong> Adjust the rounding of the column’s corners. Use larger values for more rounded corners.<\/li>\n\n\n\n
                              • Box Shadow:<\/strong> Add a shadow around the column to create visual depth and separation from the background.<\/li>\n<\/ul>\n\n\n\n

                                <\/p>\n","protected":false},"excerpt":{"rendered":"

                                The Column Block lets you organize content inside a Row Block. You can add text, images, buttons, headings, and other Gutenberg blocks inside a column. You can also place another Row Block inside a column to create nested layouts. Use the Column Block to build multi-column layouts and control the width, alignment, spacing, background, and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[15],"doc_tag":[],"class_list":["post-2033","docs","type-docs","status-publish","hentry","doc_category-layout-docs"],"year_month":"2026-10","word_count":1140,"total_views":"17","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Layout Docs","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/layout-docs\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2033"}],"version-history":[{"count":0,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2033\/revisions"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2033"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2033"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}