With the blocks, rows and columns layout, you have to configure your column options, either with these buttons:
or the YAML, for example like this:
config:
label: Overview
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
slots:
default: []
- component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
slots:
default: []
- component: oh-grid-col
config:
width: "100"
medium: "33"
slots:
default: []
The width is the default, so if you plan for phones (and you should) that would be the maximum size allowed for your column (often 100%), and then you select how much you want them to decrease when the screens get larger.
That’s how you end up with a responsive design:
