Canvas Docs

Row

A grid row. Place Canvas Column blocks inside to lay out content in a responsive grid. It is shown in the block inserter as Canvas Row and registered as canvas-core/row.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Row settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Layout

  • DisplayDefaultGrid Row

    Lay the inner blocks out as grid columns, or as slides in a carousel.

    ChoicesGrid RowCarousel

  • GutterDefaultDefault

    Space between the columns. Choose None for tiles that meet with no gap at all.

    ChoicesDefaultNone (g-0)Tiny (10)Small (20)Medium (30)Large (40)X-Large (50)

  • Vertical AlignDefaultEmpty

    Where columns of unequal height sit against each other. Centre is the usual choice for a picture beside a short paragraph.

    ChoicesDefault (empty)TopCenterBottom

  • Horizontal JustifyDefaultEmpty

    How the columns are spread across the row when they do not fill its whole width.

    ChoicesDefault (empty)StartCenterEndSpace BetweenSpace Around

  • Mobile Bottom SpacingDefaultEmpty

    Gap left under each column once the row stacks on a narrow screen, so the stacked items do not run together.

    ChoicesDefault (empty)305080

  • Items (base)Default0

    Fallback item count for every breakpoint that sets none of its own. 0 leaves it unset.

    Shown when Display is "Carousel"

  • Items (XS)Default1

    Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).

    Shown when Display is "Carousel"

  • Items (SM)Default2

    Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Display is "Carousel"

  • Items (MD)Default3

    Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Display is "Carousel"

  • Items (LG)Default4

    Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Display is "Carousel"

  • Items (XL)Default4

    Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.

    Shown when Display is "Carousel"

  • Item Gap (px)Default20

    Space between one slide and the next, in pixels.

    Shown when Display is "Carousel"

  • Show ArrowsDefaultOn

    Show the previous and next arrows beside the slides.

    Shown when Display is "Carousel"

  • Arrows Always VisibleDefaultOff

    Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

    Shown when Display is "Carousel"

  • Show DotsDefaultOn

    Show the row of dots below the slides, one per page.

    Shown when Display is "Carousel"

  • Autoplay (ms)Default0

    Milliseconds between slides. 0 disables autoplay.

    Shown when Display is "Carousel"

  • LoopDefaultOff

    Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.

    Shown when Display is "Carousel"

  • Transition SpeedDefault250

    Milliseconds per slide transition.

    Shown when Display is "Carousel"

  • Centre Active SlideDefaultOff

    Keeps the active slide in the middle of the stage.

    Shown when Display is "Carousel"

  • Stage PaddingDefault0

    Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.

    Shown when Display is "Carousel"

  • Animate InDefaultEmpty

    Animation class applied to the incoming slide. Empty uses a plain slide.

    Shown when Display is "Carousel"

  • Animate OutDefaultEmpty

    Animation class applied to the outgoing slide. Empty uses a plain slide.

    Shown when Display is "Carousel"

  • Carousel Type ClassDefaultEmpty

    Emits owl-carousel {type}-carousel, matching the design family the slides belong to (e.g. "fbox" for feature boxes). Leave empty for a plain carousel.

    Shown when Display is "Carousel"

  • Full-Height ArrowsDefaultOff

    Draw the previous and next arrows as tall panels flush inside the left and right edges of the carousel, rather than small buttons hanging outside it.

    Shown when Display is "Carousel"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Layout: Column, Container, Copyrights, Footer About, Footer Contacts, Footer Instagram.

Was this page helpful?