[css-grid] Handle [align/justify]-[content/items] appropriately

[Dan503]

IE does not supporting any of these properties:

• align-content
• align-items
• justify-content
• justify-items

For align-items and justify-items, you can often work around the issue by using align-self and justify-self instead:

/* This: */
.grid {
  justify-items: center;
  align-items: center;
}

/* Is very similar to this: */
.grid > * {
  align-self: center;
  justify-self: center;
}

It doesn't work in 100% of circumstances but it does work most of the time. If Autoprefixer knows that the element is a grid container then it should be prefixed like so:

Input CSS

.grid {
  display: grid;
  justify-items: center;
  align-items: center;
}

Expected output CSS

.grid {
  display: -ms-grid;
  display: grid;
  justify-items: center;
  align-items: center;
}
.grid > * {
  -ms-grid-column-align: center;
  -ms-grid-row-align: center;
}

If justify-items or align-items is used in the same rule as any of the following properties, then it is safe to assume that it is a grid container element:

• display: grid
• display: inline-grid
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap

For align-content and justify-content Autoprefixer should warn users that IE does not support those properties if it detects that they are being used on a grid container and grid translations are enabled.

Example Warning:

IE does not support align-content and justify-content on grid containers

[Dan503]

If the author uses place-items: center; Autoprefixer should treat that in the same way as if the author wrote justify-items: center; align-items: center;.

[ai]

Maybe we should show the warning on both cases? It is not so hard for user to move justify-self into grid children.

[Dan503]

We could but Autoprefixer is all about automating as much as possible so users don't have to think about IE as much.

I don't see any downsides to prefixing the align/justify-items property in this way so I don't really see much reason not to do it.

Can you think of any significant downsides?

[ai]

Can you think of any significant downsides?

.child {
  align-self: start;
}
.parent {
  display: grid;
  align-items: center;
}

[Dan503]

🤔...😵 right.

Ok maybe just warnings for both then.

[Dan503]

If we give a warning for align/justify-items then in that warning we should also recommend trying align/justify-self on the child elements instead so that people know that it is an option.

[ai]

I sent this task to our Cult of Martians

[andrIvash]

Is it possible to run some testing method each time while checking property?
andrIvash@fd23781

[bogdan0083]

@andrIvash I'm not sure I understood you correctly, but If you want to run some function for a test stylesheet and compare the output, you need to check out autoprefixer.test.js file which contains many examples and where most of properties are tested.

Also check out test/cases folder. This is where css files are located for testing.

[Dan503]

The easiest way to do quick tests using the current code base is by running the gulp play command and writing input CSS into playground/input.css.

Check the output in playground/output.css.

[fanich37]

Maybe it should look smth like this:
fanich37@3864f68