PricingBlog

Responsive Grids

  • _.__._.__.__._-1466349895605813393

    Ethan

    5 days ago

    Hi All,

    My application is going to be used on both mobile and desktop devices. Several major components of it are grids of cards. I would like make a responsive grid that adjusts, so that may display in a 3×3 grid on desktop but a 1×9 grid on mobile.

    I know there are things like the grid layout and CSS variables that have been added to NordCraft recently, but I'm not sure how to use them, or where to learn how to use them for cases such as mine.

    Can anyone recommend some resources on how to do this?

    Many thanks.
    1
  • whitep4nth3r-1466391555198812272

    salma

    5 days ago

    This would be good to look at, the key here is using the minmax() in the grid-template-columns property

    https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/
  • _.__._.__.__._-1466417153011089594

    Ethan

    5 days ago

    Thank you for this, I also found this video to be helpful:
    https://www.youtube.com/watch?v=Zu8cdgunGGE
    🙌1