Live sass compiler - autoprefixer overwriting css grid rules

HTML & CSS
1

Hi,

I am relatively new to CSS grid, so please forgive my naivety here. By the way this is IE11 related.

I have 2 pages, home page and gallery and I have the following sass, which is being compiled in VSCode - Live sass compiler, with autoprefixer.

.container {
  /* consistent across pages */
  margin: 0 auto;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(160px, auto) auto;

  main {
    display: block; // main tag not properly supported in ie11
  }

  /* specific to individual pages */
  &.home {

    grid-template-areas:
    'head head head'
    'slider slider slider'
    'main main sidebar'
    'footer footer footer';

    header {
      grid-area: head;
    }

    .slider {
      grid-area: slider;
      min-width: 0;
      padding: 30px 45px;
    }

    main {
      grid-area: main;
      padding: 0 10px 30px 45px;
    }

    .side-bar {
      grid-area: sidebar;
      padding: 0 45px 30px 10px;
    }

    footer {
      grid-area: footer;
    }
  }

  &.gallery {
    grid-template-areas:
      'head head head'
      'main main main'
      'footer footer footer';

    header {
      grid-area: head;
    }

    main {
      grid-area: main;
      padding: 0 45px 30px;
    }

    footer {
      grid-area: footer;
    }
  }
}

ps. Why no colours in the above code?

The specific issue is when autoprefixer does it’s bit, it’s overwriting rules.

So for instance if I comment out the &.gallery section the main block for home reads as

.container.home main {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2; /* span of 2 */
  grid-area: main;
  padding: 0 10px 30px 45px;
}

Which follows with ‘main main sidebar’

if I remove comments from &.gallery the grid-template-area associated with container.gallery e.g. ‘main main main’ is now over-writing the definition in container.home

.container.home main {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3; /* span of 3 */
  grid-area: main;
  padding: 0 10px 30px 45px;
}

One solution I found was to define areas with unique names

so for home
'main-h main-h sidebar-h' and grid-area: main-h
and for gallery
'main-g main-g main-g' and grid-area: main-g

This seems ridiculous though.

Any advice would be much appreciated. Thanks

2

Wondering if I’ve asked a daft question?

Opted to drop template areas and set columns and rows individually.

.container {
  margin: 0 auto;
  max-width: 1100px;
  min-width: 360px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(160px, auto) auto;

  header {
    grid-column: $all-columns;
    grid-row: $row-1;
  }

  main {
    grid-column: $all-columns;
    grid-row: $row-2;
    display: block;
    padding: 0 $desk-pad-x $desk-pad-y;
  }

etc
3

Sorry I’m away for a week but I think the problem with autoprefixer and ie11 is documented here.

I don’t use autoprefixer so couldn’t test anyway.

1 Like
4

Thanks PaulOB, will check that link out :slight_smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.