Navigation

    APPDRAG Community

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular

    REMINDER

    Please be respectful of all AppDragers! Keep it really civil so that we can make the AppDrag community of builders as embracing, positive and inspiring as possible.

    Support dynamic columns using CSS Grid in Site Builder.

    Features requests
    3
    6
    387
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      Thomas D last edited by Thomas D

      It's certainly supported enough and makes it possible for automatic column breaks when using back-end functions to repeat data in columns.

      1 Reply Last reply Reply Quote 1
      • Joseph Benguira
        Joseph Benguira last edited by

        Hey Thomas,

        When you edit a ROW in the pagebuilder > Position, you can uncheck Flex row which is forcing all columns in that row to stay on the same line. Once unchecked it will be able to go to several rows. For eg if you have 3 columns per row and you are generating 8 columns you will get 2 rows of 3 columns plus 1 row of 2 columns

        b9206492-b1b1-4b4f-9ddb-1e0c832e40f9-image.png 516c861f-7a2e-4c6f-9dc2-df1ef36137f1-image.png

        1 Reply Last reply Reply Quote 0
        • T
          Thomas D last edited by Thomas D

          I tested with the one you're using in your example, I get 3 columns down to 768, then all columns are full width.

          If we had support for CSS Grid, then we could configure the content to break where it looks the best. In my case, that is 3 columns until 992px and then 2 columns until 650px.

          The Flex solution currently in use don't work when using it in combination with Back-end Function, because when you remove the other 2 columns in your example, the inline-calculation will change from: width: calc(33.3333% - 30px); to width: calc(100% - 30px); which of course breaks the column flow.

          I'd say, it's time for something more flexible (no pun intended) and configurable, for the columns.

          1 Reply Last reply Reply Quote 0
          • Joseph Benguira
            Joseph Benguira last edited by

            This is a frequent pattern, what we do usually is to have 3 columns, first one with your datasource content and 2 others ones empty, this way, the first column that will be repeated will have a correct size.

            Anyways, yes we might check CSS Grid 😉

            T 1 Reply Last reply Reply Quote 0
            • T
              Thomas D @Joseph Benguira last edited by

              @Joseph-Benguira said in Support dynamic columns using CSS Grid in Site Builder.:

              This is a frequent pattern, what we do usually is to have 3 columns, first one with your datasource content and 2 others ones empty, this way, the first column that will be repeated will have a correct size.

              Anyways, yes we might check CSS Grid 😉

              Right, I didn't think of having invisible stuff hanging at the end and I don't think anyone else will, either. Here's to hoping for a proper CSS grid implementation ✌

              Linda MacDonald 1 Reply Last reply Reply Quote 1
              • Linda MacDonald
                Linda MacDonald @Thomas D last edited by

                @ThomasD I would absolutely love to have css grid 🙂

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post