Columns and rows in B3

I Need Help
1

Hey guys, in Blocs 3 isn’t it possible to move columns and rows by drag and drop? Also copy and paste isnt possible?

2

I am also struggeling.
It seems one has to fiddle around with the left sidebar a lot.

Da haben wir ne gehörige Lernkurve :slight_smile:
Liegt wohl an Bootsrap 4

3

I don’t think you can move columns or rows, as I think there’s a strong possibility of breaking layouts, but you can move Blocs up & down in the layer navigator.

Bill
BricsDesign

4

Here are some scenarios I have tested.

  1. You can move both Columns and Rows in the sidebar.

  2. You can add a row to a column that already has a row. (thus having 2 rows in that column)

  3. you can move a column above or below another column to change the column order.

You can make some situations that don’t give the layout you expect, but it works as I expect based on my test.

When it does something you don’t expect you are probably trying to add columns that span more than the 12 columns. Remember: even if you are in a row that only spans half the project, there are still 12 columns inside that row. 12 very narrow columns. It’s up to you to do things like using 3 columns each with a span of 4. (3x4=12)

I’ll try to make time for a video on this, it’s really hard to describe clearly without visuals.

5

RME, the column are resized several ways. You can drag the right of a column to size it’s width. Drag the left handle to off set the column. You can also use the left side panel inspector.

I don’t think copy and paste are available. It’s duplicate and then move the columns.

casey

6

The more I think about it. You’re more likely experience something you don’t expect when you are moving columns that have you changed the “column span” manually either by free dragging it or using the appearance widget.

This is a Bootstrap thing. I’ll try to explain containers, columns and rows.

Column Spans

First note that in the Appearance widget, The “Width” parameter is actually referring to column spans.

Each Column spans across the row it’s in and each row is considered to have a 12 column span. The span/“widths” as Blocs calls them are percentages so the columns just get narrower if there container is narrow… but it’s still 12 columns. Luckily Bootstrap lets you override or specify the span of any column so you can make a single column the span/“width” of 3,4,5 etc. spans (or any number up to 12.)

When using Blocs to drag and drop

Now let’s say you drag a column that has a span/“width” of 3 …and place it under a column width a span of 5. That’s 8 spans, you’ve only got 4 span remaining to make additional column(s) hence the 12 span total. If you added a single column at 4 spans/“width” you would have a full row with columns filling the row. If you add a single column that is more than 4 spans, that column will wrap like a line break in a text editor, forcing you to resize it if you want to use it normal. Those column spans must be 12 or fewer, but not more.

7

Yes there is a lot to think about. In Blocs 3 columns are inside a row. Yes there is 12 columns (spans). The objective is being able to design just about any layout you want (within the 12) but as you said it can get kind of messy dealing with all the breakpoints. The offset and column sizes can change with the four breakpoints.

casey