Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • David 29 posts 200 karma points
    Dec 14, 2022 @ 12:55
    David
    0

    Umbraco 11 Block Grid

    I have downloaded the sample block grid website from nuget and all works great.

    Is there a way to make the grid response (stack above each other) by altering the sample stylesheet provided? (myblockgridlayout.css)

    I haven't used css grid before and wondered if anyone can shed some light?

    .umb-block-grid__layout-container {
        position: relative;
        display: grid;
        grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: minmax(50px, min-content);
        column-gap: var(--umb-block-grid--column-gap, 0);
        row-gap: var(--umb-block-grid--row-gap, 0);
    }
    
    .umb-block-grid__layout-item {
        position: relative;
        /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
          grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
        grid-row: span var(--umb-block-grid--item-row-span, 1);
    }
    
    
    .umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
        position: relative;
        display: grid;
        grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: minmax(50px, min-content);
        column-gap: var(--umb-block-grid--areas-column-gap, 0);
        row-gap: var(--umb-block-grid--areas-row-gap, 0);
    }
    
    .umb-block-grid__area {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
            grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
        grid-row: span var(--umb-block-grid--area-row-span, 1);
    }
    
    @media (min-width:1024px) {
    
        .umb-block-grid__layout-item {
            grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
        }
    
        .umb-block-grid__area {
            grid-column-end: span var(--umb-block-grid--area-column-span, 1);
        }
    }
    
    
    /**** Custom additions to the default Grid Layout Stylehseet: ****/
    
    
    /* additional CSS options for area-container and areas: */
    .umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
        max-width: var(--my-container-max-width);
        padding: var(--my-container-padding);
        margin-left: auto;
        margin-right: auto;
        --umb-block-grid--areas-column-gap: 60px;
        --umb-block-grid--areas-row-gap: 60px;
    }
    
    .umb-block-grid__area {
        justify-content: center;
    }
    
    .umb-block-grid__layout-item[data-content-element-type-alias="oneColumnSectionBlock"] .umb-block-grid__layout-container {
        --umb-block-grid--column-gap: 60px;
        --umb-block-grid--row-gap: 60px;
    }
    
  • Peter Cort Larsen 421 posts 1038 karma points
    Jan 10, 2023 @ 09:56
    Peter Cort Larsen
    0

    Did you find a solution?

  • Peter Cort Larsen 421 posts 1038 karma points
    Jan 10, 2023 @ 11:01
    Peter Cort Larsen
    0

    Actually here are some good settings, for making the grid more responsive:

    section {
    padding: var(--section-padding, 10px 0); /*control spacing between section, adjust 10px*/
    

    } @media (max-width: 991px) { .umb-block-gridarea { --umb-block-grid--grid-columns: 12 !important; --umb-block-grid--area-column-span: 12 !important; --umb-block-grid--area-row-span: 1 !important; } .umb-block-gridarea-container, .umb-block-grid__block--view::part(area-container) { --umb-block-grid--areas-column-gap: 0; --umb-block-grid--areas-row-gap: 0; }

    .umb-block-grid__layout-item[data-content-element-type-alias="oneColumnSectionBlock"] .umb-block-grid__layout-container {
        --umb-block-grid--column-gap: 0;
        --umb-block-grid--row-gap: 0;
    }
    
    .rich-text {
        columns: inherit;
    }
        .rich-text h3, .rich-text p {
            width: 100%;
        }
    

    }

  • Craig100 1136 posts 2523 karma points c-trib
    Jan 25, 2023 @ 13:41
    Craig100
    1

    Here's one that works in 11.1. Most px's swapped for em's:-

        section {
        padding: var(--section-padding, 0.6em 0); /*control spacing between section, adjust 10px*/
    }
    
    .umb-block-gridlayout-container {
        position: relative;
        display: grid;
        grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: minmax(3em, -webkit-min-content);
        grid-auto-rows: minmax(3em, min-content);
        -moz-column-gap: var(--umb-block-grid--column-gap, 0);
        column-gap: var(--umb-block-grid--column-gap, 0);
        row-gap: var(--umb-block-grid--row-gap, 0);
    
    }
    
    .umb-block-grid__layout-item {
        position: relative;
        /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
        grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
        grid-row: span var(--umb-block-grid--item-row-span, 1);
        padding: 0 0 1em 0;
    }
    
    .umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
        position: relative;
        display: grid;
        grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-rows: minmax(3em, -webkit-min-content);
        grid-auto-rows: minmax(3em, min-content);
        -moz-column-gap: var(--umb-block-grid--areas-column-gap, 0);
        column-gap: var(--umb-block-grid--areas-column-gap, 0);
        row-gap: var(--umb-block-grid--areas-row-gap, 0);
    }
    .umb-block-grid__area {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
        grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
        grid-row: span var(--umb-block-grid--area-row-span, 1);
    }
    
    @media (min-width:1024px) {
        .umb-block-grid__layout-item {
            grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
        }
    
        .umb-block-grid__area {
            grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
        }
    }
    
    /**** Custom additions to the default Grid Layout Stylehseet: ****/
    
    
    /* additional CSS options for area-container and areas: */
    .umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
        max-width: var(--my-container-max-width);
        padding: var(--my-container-padding);
        margin-left: auto;
        margin-right: auto;
        --umb-block-grid--areas-column-gap: 2em;
        --umb-block-grid--areas-row-gap: 1em;
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft