CSS Grid is SUCH a Timesaver

Поділитися
Вставка
  • Опубліковано 5 жов 2024

КОМЕНТАРІ • 25

  • @0xAndy
    @0xAndy 11 місяців тому +1

    This channel is such a gem.

  • @alexpanteli3651
    @alexpanteli3651 11 місяців тому +4

    Small tip: You can omit the end and start when declaring the grid. Grid is smart enough to understand where the end and start is when positioning a grid item

    • @frontendfyi
      @frontendfyi  11 місяців тому +1

      I learned something just now!! Thanks!

    • @kizigamer6895
      @kizigamer6895 11 місяців тому +1

      I dont understand what the tip means in practice can u elaborate more pls i also want to learn this me know the basics of grid and flex
      but get confused to use which one and this video help me understand grid more

    • @spectre_9
      @spectre_9 11 місяців тому +1

      @@kizigamer6895 I'm guessing he means instead of declaring full-start / full-end or content-start / content-end, you can simply declare, full and content without the start or end suffix. Correct me if I understood wrong :)

    • @frontendfyi
      @frontendfyi  11 місяців тому

      @@spectre_9This is also what I understood! Didn't try it myself yet though.

  • @iAmTheWagon
    @iAmTheWagon 11 місяців тому +1

    Incredible. I had no idea this was a thing.

  • @piotr406
    @piotr406 11 місяців тому

    Reinventing in my head grid, 100% will use it more often

  • @serveshchaturvedi2034
    @serveshchaturvedi2034 11 місяців тому +1

    This came as a mind grenade 🤯. I feel i have some kind of superpower now

    • @frontendfyi
      @frontendfyi  11 місяців тому +2

      Right!!! This is so powerful!

  • @roysaucedo
    @roysaucedo 7 місяців тому

    This is awesome!

  • @kaushikravikumar7472
    @kaushikravikumar7472 6 місяців тому

    This is really cool! May I know what theme and font you are using here?

  • @manikantaprasadlopinti8375
    @manikantaprasadlopinti8375 11 місяців тому

    On the desktop view we can see the beauty of it

    • @frontendfyi
      @frontendfyi  11 місяців тому

      🫡 - do you have a great example you want me to replicate? I feel every video I make of scroll animations is the same.

  • @serychristianrenaud
    @serychristianrenaud 11 місяців тому +1

    Thanks

  • @w3mw
    @w3mw 8 місяців тому

    Can I have a div with bg color with full-bleed and the content inside will be by default width? If yes, how? 😃

  • @marcos-ferreira1305
    @marcos-ferreira1305 11 місяців тому

    awesome video!

  • @richardpolderl3675
    @richardpolderl3675 7 місяців тому

    Is it possible to write all of this in tailwind somehow? I suppose it should be achievable with tailwind's `[ ]` notation somehow.
    Also how often do you use this? This feels like a great way to apply a grid to pages in general, do you have some templates that you often apply for new pages/designs?

    • @frontendfyi
      @frontendfyi  6 місяців тому

      For a single line grid I think that could work, but beyond that it won't unfortunately. Besides that I think making that based on an arbitrary value is just a little bit too much. Nothing wrong with adding this to the CSS file imo.
      I really like to use this setup for more text based pages (eg blog detail pages). I don't have any templates ready to go, I built it from scratch every time.

  • @akemegbebu7807
    @akemegbebu7807 11 місяців тому

    I thought tailwind was the new css 😮😮😮😮

  • @jaydeep-p
    @jaydeep-p 11 місяців тому +1

    Grid is the way forward.

  • @pexeixv
    @pexeixv 11 місяців тому

    How are the images created again?

    • @frontendfyi
      @frontendfyi  11 місяців тому

      These ones specific are created with Dall-e by OpenAI