<Cell middle center>
   <div>Text</div>
</Cell>

Doesn't center if inside it anything else than text.

Many of the the utilities implemented in flexboxgrid can be implemented in display: grid, this library should offer shorthands for them too:

• Offsets (done in #10 via left and top)
• Alignment (done in #10 via center and middle)
• Distribution (done in #22 via justifyContent and alignContent)
• Reordering (done in #10 via flow, left and top)
• Reversing Not really applicable

Currently styled-css-grid uses styled-components v2.1.1 and

[email protected]" has incorrect peer dependency "styled-components@^2"

Meanwhile styled-components' current version is v3.4.2.

Basically if the comparability is not terribly broken maybe styled-css-grid should be updated to use a newer version of its main dependency?

Thanks! 👌

Does not work from NPM:

Failed to compile.

./node_modules/styled-css-grid/dist/styled-css-grid.esm.js
Module not found: Can't resolve 'styled-components' in 'C:\GitRepos\Beaconsoft\Admin\overload-2\node_modules\styled-css-grid\dist'

Had to manually install styled-components from npm for it to work

It is quite old and a bit discouraging for Edge still. The updated version looks much better 😉

Please add support of different gap between rows and columns.

Right now you have:

const gap = ({ gap = "8px" }) => `${gap} ${gap}`;

So if I pass <Grid gap="16px 64px" /> it will result into:

grid-gap: 16px 64px 16px 64px;

which is invalid css value

Just wondering why you choose to fix the rendered tag of the cel component to this semantic one : <section>. Perhaps a simple <div> would have been a less opinionated tag ...

Nice feature to add could be offer tag modification with a new Cell component property, for exemple using clean-tag lib of styled-system (https://github.com/jxnblk/styled-system/tree/master/clean-tag) ...

Would you accept a pull request on this point ?

The alignment section on the website displays off. See this screenshot.

I'm using Safari 12.1.1 on macOS Mojave (10.14.5).

The docs site is currently rendered on the client with ReactDOM.render, but we should be able to pre-render as part of the build step since the content is static.

Fairly straightforward: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap

  <Grid columns={"1"} justifyContent="center" rowGap="40px">
        <Cell>
            <Grid columns="5">
<Cell></Cell>
<Cell></Cell>
<Cell></Cell>
<Cell></Cell>
<Cell></Cell>
           </Grid>
</Cell>
<Cell></Cell>
.....
</Grid>

The 5 columsn nested doesn't work

A 3 column default is nice for demos but in practice a larger number is required. 12 seems to be commonplace in responsive design.

Currently the images on the website are served from http://lorempixel.com/ which makes the site mixed content.

Hello!

I love your little library, and I'd love to be able to leverage it in my ecosystem with @emotion.
My suggestion for the implementation would be to extract the styled component dependency from your library and offer an initialization hook of some sort that could take the styled library of choice as a parameter.

Something like this:

import styled from '@emotion/styled';
import { jsx, css } from '@emotion/core';
import { initialize } from 'styled-css-grid';

initialize({
  package: '@emotion/styled@^10',
  exports: {
    styled,
    jsx,
    css,
  }
});

And then in your code depending on the scope from the initialize function you could have a conditional that branches based on the API of the provided package.

How does that sound?

Have a great day!

Cheers,

Philippe

Hi,

I'm using a holy grail type layout. How would I go about hiding the left and right columns on on small screen devices ?

Thanks

Expose the grid-template-areas and grid-area CSS properties.

Hi @azz, would you be open to a PR that adds types for TypeScript users of this package?

How does one create a grid that has cells with min-height and instead of distributing the size between them - creates a scroll-able area when min-height is reached

Hi I came across this package and found it really cool. Though I still have few questions about it:

• Is it possible to add width/height at the grid or grid-item level ?
• On the Cell the dimensions are in unit so it is not possible to pass in actual dimensions such as 40px ?

Currently in order to be responsive to device width, you must change the columns prop of the <Grid /> component based on the width yourself.

We could add an API to specify breakpoints, that might look something like:

<Grid columns={[
  2,
  ["(min-width: 400px)", 3],
  ["(min-width: 800px)", 4]
]}>
  <Cell>A</Cell><Cell>B</Cell>
  <Cell>C</Cell><Cell>D</Cell>
</Grid>

This way we could use efficient @media rules rather than observing onresize events.

As a styled-css-grid user I would like to change the default value for props like gap without relying on HoCs. Since styled-css-grid uses styled-components maybe leveraging it's theming solution would be a good idea.

Support for theming would be really awesome, is it aligned to styled-css-grid path forward?

Here you can see <Cell middle> in Chome and Firefox. The layout is incorrect in Firefox.

This can be fixed by removing the align-content: space-around style when we apply the middle prop style.

Happy to create a PR if this solution is acceptable.

This is just a suggestion, so feel free to close this if you consider it spam, but i think grommet's "areas" prop for the grid component is very intuitive and gives you a sense of how the whole grid is structured in one place

<Grid
  rows={['xxsmall', 'xsmall']}
  columns={['xsmall', 'small']}
  gap="small"
  areas={[
    { name: 'header', start: [0, 0], end: [1, 0] },
    { name: 'nav', start: [0, 1], end: [0, 1] },
    { name: 'main', start: [1, 1], end: [1, 1] },
  ]}
>
  <Box gridArea="header" background="brand" />
  <Box gridArea="nav" background="light-5" />
  <Box gridArea="main" background="light-2" />
</Grid>

And that it would be very nice to have it in this project. Maybe if i had the time i'd implement it myself if it makes sense for this codebase, but unfortunately i don't have it right now, so it's just a suggestion for the time being. Great project by the way.

Hi! Thank you for making this package. I have a question about default styles: what is the reason to keep overflow: hidden for the Cell here ? It brakes absolutely positioned elements (i.e. dropdowns) placed inside.

Hello, first awesome library love it. I have a simple question. In my ui look like the grid never take the full space of his parent. I can't add width: 100% . Do you have a solution for this ?

When installing a package with styled-css-grid as a dependency:

npm WARN [email protected] requires a peer of styled-components@^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.

In output of npm ls styled-components:

npm ERR! peer dep missing: styled-components@^2 || ^3 || ^4, required by [email protected]

styled-css-grid appears to work fine with styled-components@5 but the peer dependency doesn't account for it. I believe we can add this to support newer releases of styled-components without breaking things for current users of styled-css-grid.