Forums

Give help. Get help.

  • # March 13, 2018 at 6:45 am

    I have been trying to work with css-grid and I am changing the grid size using radio buttons between 4 tiles, 9 tiles and 12 tiles. I have checked the code and it seems fine but the layout is not working properly.

    can anyone point out what could possibly be wrong with this?

    Here is the codepen demo – https://codepen.io/xblack/pen/WzeLVa

    # March 13, 2018 at 8:03 am

    It’s not clear what “not working properly” means…

    # March 13, 2018 at 8:07 am

    …but I suspect it’s because of the assigned grid-coloumn/rows you had in place which aren’t really necessary in this instance

    # March 13, 2018 at 12:16 pm

    Strangely it is working but would you mind explaining why it wasn’t working? Also, I would like to know why tile 1 has red color and 3 has blue color always?

    [Done] I got the solution

    # March 13, 2018 at 12:53 pm

    You’d defined certain children as having grid positions but those weren’t being updated by the JQuery.

    The same goes for some of the divs…which apply in multiple cases.

    .main div:nth-child(3) {
      background: blue;
      height:100%;
    }
    

    for instance.

    So if you make the selector more specific

    .main > div:nth-child(2) { 
      background: green;
      display: grid;
      grid-gap: 0.4rem;
    }
    

    # March 14, 2018 at 2:42 am

    @paulie_d Thank you so much for the reply. :) you saved my life. Would you mind looking at my other question too. Please :)

    Div animation when moving from one container to another

    Nobody has touched that question.

    # March 14, 2018 at 4:08 am

    Yeah…sorry…that one is completely beyond me.

    It would be incredibly complex…you’re gonna need motionpaths & all sorts

    # March 14, 2018 at 6:28 am

    @paulie_d Thanks for the hint. I can follow up your suggestion. Please let me know if you have any other hint too :) :) Thanks again :) Man!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag