12 Matching Annotations
  1. Nov 2023
  2. dev.to dev.to
    🧙‍♂️ CSS trick: transition from height 0 to auto!
    1
    1. kael 27 Nov 2023
      ✅ We can actually use a neat trick which basically consists in making a CSS grid with a single grid item. All we really have to do then, is taking our grid-template-rows and make it transition from 0fr to 1fr: this way, our grid item will transition from 0 to its "natural" height. It's THAT simple:

      ```css .accordion - body { display: grid; grid - template - rows: 0 fr; transition: 250 ms grid - template - rows ease; }

      .accordion: hover.accordion - body { grid - template - rows: 1 fr; }

      .accordion - body>div { overflow: hidden; } ```

      html css css:display=grid css:grid-template-rows css:transition
    Visit annotations in context

    Tags

    Annotators

    URL

    dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de
  3. Jul 2023
  4. firefox-source-docs.mozilla.org firefox-source-docs.mozilla.org
    CSS Grid Inspector: Examine grid layouts — Firefox Source Docs documentation
    1
    1. kael 12 Jul 2023
      firefox devtools html css css:grid
    Visit annotations in context

    Tags

    Annotators

    URL

    firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html
  5. developer.mozilla.org developer.mozilla.org
    Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN
    1
    1. kael 12 Jul 2023
      css:grid css html
    Visit annotations in context

    Tags

    Annotators

    URL

    developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
  6. Nov 2022
  7. github.com github.com
    GitHub - prabhuignoto/react-visual-grid: 🪟 Image Grid / Gallery for React
    1
    1. kael 27 Nov 2022
      react-visual-grid reactjs css:grid
    Visit annotations in context

    Tags

    Annotators

    URL

    github.com/prabhuignoto/react-visual-grid
  8. www.youtube.com www.youtube.com
    Page responsive avec CSS Grid + Flexbox
    1
    1. kael 21 Nov 2022
      css mobile css:grid css:flex
    Visit annotations in context

    Tags

    Annotators

    URL

    youtube.com/watch
  9. www.youtube.com www.youtube.com
    Créer une belle carte avec CSS GRID
    1
    1. kael 21 Nov 2022
      css css:grid
    Visit annotations in context

    Tags

    Annotators

    URL

    youtube.com/watch
  10. www.youtube.com www.youtube.com
    Using Tailwind CSS Grid Classes
    1
    1. kael 21 Nov 2022
      tailwind css css css:grid
    Visit annotations in context

    Tags

    Annotators

    URL

    youtube.com/watch
  11. www.youtube.com www.youtube.com
    Grid Layouts (the easy way) // Tailwind CSS
    1
    1. kael 21 Nov 2022
      tailwind css css css:grid
    Visit annotations in context

    Tags

    Annotators

    URL

    youtube.com/watch
  12. www.digitalocean.com www.digitalocean.com
    CSS Grid Layout: The Fr Unit | DigitalOcean
    1
    1. kael 14 Nov 2022
      css css:grid
    Visit annotations in context

    Tags

    Annotators

    URL

    digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
  13. mozilladevelopers.github.io mozilladevelopers.github.io
    CSS Grid Layout + Firefox = ❤️
    1
    1. kael 14 Nov 2022
      css css:grid
    Visit annotations in context

    Tags

    Annotators

    URL

    mozilladevelopers.github.io/playground/css-grid/
  14. developer.mozilla.org developer.mozilla.org
    Array.prototype.reduce()
    1
    1. kael 14 Nov 2022
      css css:grid
    Visit annotations in context

    Tags

    Annotators

    URL

    developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
  15. May 2022
  16. canvatechblog.com canvatechblog.com
    CSS: Absolutely positioning things relatively
    1
    1. kael 25 May 2022
      css css:grid css:@media
    Visit annotations in context

    Tags

    Annotators

    URL

    canvatechblog.com/css-absolutely-positioning-things-relatively-964898de886b