[Grid.Cell] Add column, and row props

[kyledurand]

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
cjs	154.14 KB (+0.06% 🔺)
esm	90.78 KB (+0.1% 🔺)
esnext	146.22 KB (+0.18% 🔺)
css	42 KB (+0.4% 🔺)

[alex-page]

This code is pretty confusing. Are we setting everything to initial? I don't see a lot of values in the --pc- approach here.

[kyledurand]

Yeah it's hard to understand at first but I think it's better than doing this even though that might be easier to understand?

It was @aaronccasanova 's suggestion and I liked it better than calling var() a ton of times in what is essentially just as hard to read css

[kyledurand]

This is so you only have to set things like row, column, grid-template-areas at xs and lg as a minimum vs having to set them all. xs = 6 column, lg is where we switch to 12 and they cascade from a mobile up perspective

[aaronccasanova]

@alex-page See this comment and associated demo of the behavior:
#5966 (comment)

As Kyle mentioned, this enables the mobile first props strategy used throughout the component.
Before:

<Grid columns={{xs: 4, sm: 4, md: 4, lg: 6, xl: 6}} />

After:

<Grid columns={{xs: 4, lg: 6}} />

[alex-page]

Could we leave a little comment above this css that explains what it is doing. It makes sense to me but took a while to understand what is going on.