Grid row (`grid_row`)

Definition
API definition

Material design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.

🔗 External documentation.

ID	Label	Description	Schema
content	Content	The content of each cell
span	Number of columns the cells span		`type: string enum: - span-1 - span-2 - span-3 - span-4 - span-5 - span-6 - span-7 - span-8 - span-9 - span-10 - span-11 - span-12`
span_phone	Number of columns the cells span for phones		`type: string enum: - span-1 - span-2 - span-3 - span-4`
span_tablet	Number of columns the cells span for tablets		`type: string enum: - span-1 - span-2 - span-3 - span-4 - span-5 - span-6 - span-7 - span-8`
span_desktop	Number of columns the cells span for desktops		`type: string enum: - span-1 - span-2 - span-3 - span-4 - span-5 - span-6 - span-7 - span-8 - span-9 - span-10 - span-11 - span-12`
align	Alignment	Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different behavior by using one of the alignment classes (top, middle or bottom).	`type: string enum: 1: top 2: middle 3: bottom`

            id: grid_row
label: 'Grid row'
description: 'Material design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone. '
homepage: 'https://m2.material.io/develop/web/supporting/layout-grid'
slots:
    content:
        id: content
        label: Content
        description: 'The content of each cell'
props:
    span:
        id: span
        label: 'Number of columns the cells span'
        schema:
            type: string
            enum:
                - span-1
                - span-2
                - span-3
                - span-4
                - span-5
                - span-6
                - span-7
                - span-8
                - span-9
                - span-10
                - span-11
                - span-12
    span_phone:
        id: span_phone
        label: 'Number of columns the cells span for phones'
        schema:
            type: string
            enum:
                - span-1
                - span-2
                - span-3
                - span-4
    span_tablet:
        id: span_tablet
        label: 'Number of columns the cells span for tablets'
        schema:
            type: string
            enum:
                - span-1
                - span-2
                - span-3
                - span-4
                - span-5
                - span-6
                - span-7
                - span-8
    span_desktop:
        id: span_desktop
        label: 'Number of columns the cells span for desktops'
        schema:
            type: string
            enum:
                - span-1
                - span-2
                - span-3
                - span-4
                - span-5
                - span-6
                - span-7
                - span-8
                - span-9
                - span-10
                - span-11
                - span-12
    align:
        id: align
        label: Alignment
        description: 'Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different behavior by using one of the alignment classes (top, middle or bottom).'
        schema:
            type: string
            enum:
                1: top
                2: middle
                3: bottom
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': grid_row
            content:
                -
                    '@component': card
                    '@variant': default
                    header:
                        '@element': p
                        '@content': 'Card header.'
                        style: 'padding: 1rem;'
                    media_content:
                        '@component': icon_button
                        label: 'More options'
                        icon: search
                    body:
                        '@element': p
                        '@content': 'Card body.'
                    action_buttons:
                        -
                            '@component': button
                            label: 'Action 1'
                        -
                            '@component': button
                            label: 'Action 2'
                    action_icons:
                        -
                            '@component': icon_button
                            label: Share
                            icon: share
                        -
                            '@component': icon_button
                            label: 'More options'
                            icon: search
                    media_url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg=='
                    media_scale: 16-9
                -
                    '@component': card
                    '@variant': default
                    header:
                        '@element': p
                        '@content': 'Card header.'
                        style: 'padding: 1rem;'
                    media_content:
                        '@component': icon_button
                        label: 'More options'
                        icon: search
                    body:
                        '@element': p
                        '@content': 'Card body.'
                    action_buttons:
                        -
                            '@component': button
                            label: 'Action 1'
                        -
                            '@component': button
                            label: 'Action 2'
                    action_icons:
                        -
                            '@component': icon_button
                            label: Share
                            icon: share
                        -
                            '@component': icon_button
                            label: 'More options'
                            icon: search
                    media_url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg=='
                    media_scale: 16-9
                -
                    '@component': card
                    '@variant': default
                    header:
                        '@element': p
                        '@content': 'Card header.'
                        style: 'padding: 1rem;'
                    media_content:
                        '@component': icon_button
                        label: 'More options'
                        icon: search
                    body:
                        '@element': p
                        '@content': 'Card body.'
                    action_buttons:
                        -
                            '@component': button
                            label: 'Action 1'
                        -
                            '@component': button
                            label: 'Action 2'
                    action_icons:
                        -
                            '@component': icon_button
                            label: Share
                            icon: share
                        -
                            '@component': icon_button
                            label: 'More options'
                            icon: search
                    media_url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg=='
                    media_scale: 16-9
                -
                    '@component': card
                    '@variant': default
                    header:
                        '@element': p
                        '@content': 'Card header.'
                        style: 'padding: 1rem;'
                    media_content:
                        '@component': icon_button
                        label: 'More options'
                        icon: search
                    body:
                        '@element': p
                        '@content': 'Card body.'
                    action_buttons:
                        -
                            '@component': button
                            label: 'Action 1'
                        -
                            '@component': button
                            label: 'Action 2'
                    action_icons:
                        -
                            '@component': icon_button
                            label: Share
                            icon: share
                        -
                            '@component': icon_button
                            label: 'More options'
                            icon: search
                    media_url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg=='
                    media_scale: 16-9
            span: '4'
            span_desktop: '6'

Preview
Source

Card header.

Card body.

Action 1

Card header.

Card body.

Action 1

Card header.

Card body.

Action 1

Card header.

Card body.

Action 1

<div class="mdc-layout-grid"> <div class="mdc-layout-grid__inner"> <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6--desktop"> <div class="mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div> </div> <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6--desktop"> <div class="mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div> </div> <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6--desktop"> <div class="mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div> </div> <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6--desktop"> <div class="mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div> </div> </div> </div>

Grid row (grid_row)

Grid row (`grid_row`)