Center grid layout

Created on 27 November 2024, about 1 month ago

Problem/Motivation

It would have been better and clearer to make the layout using a grid.

Proposed resolution

_center.scss

example:

#center {
  @media (max-width: $screen-sm-max) {
    padding: 30px 0;

    .region-center {
      display: flex;
      flex-direction: column;

      #main {
        order: 1;
      }

      #sidebar-first {
        order: 2;
      }

      #sidebar-second {
        order: 3;
      }
    }
  }

  @media (min-width: $screen-md-min) {
    overflow: hidden;
    padding: 100px 0;

    // main
    &.sidebar-first {

      .region-center {
        display: grid;
        gap: 80px;
        grid-template-columns: 1FR 3fr;
      }

    }

    &.sidebar-second {

      .region-center {
        display: grid;
        gap: 80px;
        grid-template-columns: 3fr 1fr;
      }
  
    }

    &.two-sidebars  {

      .region-center {
        display: grid;
        gap: 80px;
        grid-template-columns: 1FR 2fr 1fr;
      }

    }

    &.no-sidebars #main {
      width: 840px;
      margin: 0 auto;
    }



  }
}
📌 Task
Status

Active

Version

3.0

Component

Code

Created by

🇨🇿Czech Republic jaroslav červený

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024