Example for responsive layout ?

[ThunderDev1]

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

[blurymind]

I've been wrestling with this too. How do you make them responsive?

[gunar]

https://styled-css-grid.js.org/#responsive

[derekcannon]

To me, that example for responsiveness is too simple. The "holy grail" is a more complex layout. Like @ThunderDev1 was saying, how would you for example make the "holy grail" layout look like this (after a certain break point):

header
menu
content
ads
footer

[omonk]

I've managed to make this work for me pretty well

import { Cell as C } from 'styled-css-grid';

const Cell = ({ widths = {}, offset = {}, top = {}, children }) => {
  // returns an object with boolean values for xs, sm, md, lg matches using
  // window.matchMedia(`(min-width: ${params}px)`).matches
  // I can share my solution if people want.
  const dimensions = useMedia();

  const widthMatches = Object.keys(widths)
    .reverse()
    .map((w) => ({ key: w, matches: Boolean(dimensions[w]) }));
  
  // Finds the first media query that matches the widths passed,
  // reserving it means lg down ⬇️, (lg, md, sm, xs)
  const match = widthMatches.find((media) => media.matches);

  // I prefer using an "offset" to be offsets of columns instead of the left behaviour which defaults to "start at" n which is why I've added one to the left value
  return (
    <C width={(match && widths[match.key]) || 12} left={match && offset[match.key] + 1} top={match && top[match.key]}>
      {children}
    </C>
  );
};


// Usage example
<Cell
  widths={{
    xs: 12,
    sm: 4,
    md: 3,
    lg: 9,
  }}
  offset={{ sm: 4, lg: 3 }}
>
  <p>
    Responsive widths are 🔥 
  </p>
</Cell>